CN109324788B - 一种基于React和Nodejs的服务端渲染方法 - Google Patents

一种基于React和Nodejs的服务端渲染方法 Download PDF

Info

Publication number
CN109324788B
CN109324788B CN201811031228.1A CN201811031228A CN109324788B CN 109324788 B CN109324788 B CN 109324788B CN 201811031228 A CN201811031228 A CN 201811031228A CN 109324788 B CN109324788 B CN 109324788B
Authority
CN
China
Prior art keywords
react
data
rendering
server
application
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201811031228.1A
Other languages
English (en)
Other versions
CN109324788A (zh
Inventor
岳梦龙
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hunan Huanuo Technology Co Ltd
Original Assignee
Hunan Huanuo Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hunan Huanuo Technology Co Ltd filed Critical Hunan Huanuo Technology Co Ltd
Priority to CN201811031228.1A priority Critical patent/CN109324788B/zh
Publication of CN109324788A publication Critical patent/CN109324788A/zh
Application granted granted Critical
Publication of CN109324788B publication Critical patent/CN109324788B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了一种基于React和Nodejs的服务端渲染方法，涉及网站开发技术领域。该方法，在使用React开发前端页面的基础上，为了避免使用React这种客户端渲染方法，无法进行搜索引擎抓取和搜索引擎优化的问题，在已有的React应用的基础上，利用nodejs实现一个渲染服务器，通过引入数据拉取和静态路由两个子模块实现在服务器端渲染出原本只能在浏览器上才能渲染出的React应用，从而可以在服务端直接输出完整页面的html，而不需要通过js在浏览器再次渲染一遍，方便了React应用的搜索引擎抓取和搜索引擎优化。

Description

一种基于React和Nodejs的服务端渲染方法
技术领域
本发明涉及网站开发技术领域，尤其涉及一种基于React和Nodejs的服务端渲染方法。
背景技术
随着互联网的发展，web页面已经由简单的html+css构成的页面，发展到大型复杂的web应用。
目前，为了解决web应用越来越复杂，前端页面编写越来越困难的问题，出现了一批强大的前端框架，React就是其中的典型。其原理是，通过在js语言中引入模块化的思想，解决了前端开发中的复用问题，使得前端可以开发更大型的应用。
然而，React是一种客户端渲染方法，如图1所示，其流程为首先在编译期在服务端生成打包好的js文件，客户端请求时只返回一个包含该js文件引用的空白html文件，该html文件在浏览器被解析后再次从服务器上请求对应的js并执行，完成对页面的渲染工作。可见，React渲染方法在第一次获取页面时是没有内容的，内容是通过第二次获取js后由js执行得到的，因此，对搜索引擎优化会导致极度不友好，出于安全性的考虑，搜索引擎只会拉取html，不会对里面的js进行解析，这样导致采用此技术的网站无法获得有效的搜索引擎排名。
发明内容
本发明的目的在于提供一种基于React和Nodejs的服务端渲染方法，可以轻松改造现有的React应用来支持服务端渲染，从而解决前述问题。
为了实现上述目的，本发明采用的技术方案如下：
一种基于React和Nodejs的服务端渲染方法，包括如下步骤：
S1，编译期，将原有的前端渲染的React项目加入数据拉取子模块和静态路由子模块后编译打包为一个整体，成为React服务端应用js文件，并将该文件部署在Nodejs编写的渲染服务器上，渲染服务器启动时加载js文件；其中，所述静态路由子模块为React应用中的StaticRouter组件；
S2，浏览器请求渲染服务器；
S3，渲染服务器调用React应用；
S4，React应用中的数据拉取子模块负责产生数据拉取请求；
S5，渲染服务器将数据拉取请求发给后台服务器；
S6，后台服务器返回所请求的数据；
S7，渲染服务器拿到数据，传入React应用；
S8，React应用中的静态路由子模块渲染出html页面；
S9，渲染服务器将html返回给浏览器；
S10，浏览器根据html渲染出页面。
优选地，S3具体为：渲染服务器启动时会加载编译好的React应用，当请求到达时，渲染服务器将请求通过函数调用并传入参数的方式传递给React应用。
优选地，S4具体为：React应用中数据拉取子模块通过分析渲染服务器传入的请求，判断需要展示的页面，并计算这些页面内容需要的数据，将需要的数据组织成一个数据拉取请求返回给渲染服务器。
优选地，S8具体为：React应用收到渲染服务器传进来的数据后，将数据交给静态路由子模块，静态路由子模块将数据与无数据的页面模板进行绑定，得到带有数据内容的页面，并将页面渲染成html字符串。
本发明的有益效果是：本发明实施例提供的基于React和Nodejs的服务端渲染方法，在使用React开发前端页面的基础上，为了避免使用React这种客户端渲染方法，无法进行搜索引擎抓取和搜索引擎优化的问题，在已有的React应用的基础上，利用nodejs实现一个渲染服务器，通过引入数据拉取和静态路由两个子模块实现在服务器端渲染出原本只能在浏览器上才能渲染出的React应用，从而可以在服务端直接输出完整页面的html，而不需要通过js在浏览器再次渲染一遍，方便了React应用的搜索引擎抓取和搜索引擎优化。
附图说明
图1是现有技术中的客户端渲染方法流程示意图；
图2是本发明提供的基于React和Nodejs的服务端渲染方法流程示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。
如图2所示，本发明实施例提供了一种基于React和Nodejs的服务端渲染方法，包括如下步骤：
S1，编译期，将原有的前端渲染的React项目加入数据拉取子模块和静态路由子模块后编译打包为一个整体，成为React服务端应用js文件，并将该文件部署在Nodejs编写的渲染服务器上，渲染服务器启动时加载js文件；其中，所述静态路由子模块为React应用中的StaticRouter组件；
S2，浏览器请求渲染服务器；
S3，渲染服务器调用React应用；
S4，React应用中的数据拉取子模块负责产生数据拉取请求；
S5，渲染服务器将数据拉取请求发给后台服务器；
S6，后台服务器返回所请求的数据；
S7，渲染服务器拿到数据，传入React应用；
S8，React应用中的静态路由子模块渲染出html页面；
S9，渲染服务器将html返回给浏览器；
S10，浏览器根据html渲染出页面。
现有技术的局限在于，如果前端页面较为复杂的话，则使用React技术进行开发是一种非常有效的方式，而如果采用React这种前端渲染技术的话，则开发出的网站往往无法进行搜索引擎优化，而搜索引擎优化是一个商业网站必不可少的功能，因此，为了解决鱼与熊掌不可兼得的问题，本发明提出了通过nodejs实现一个渲染服务器，并通过React的数据拉取和静态路由两个子模块实现了在服务器端可以渲染出原本只能在浏览器上才能渲染出的React应用，方便了React应用的搜索引擎抓取和搜索引擎优化。
本实施例中，S1具体可以为：在编译期间，在已有的React项目的背景下，通过引入两个业务无关的React模块(即所有的React项目均可使用该模块)：数据拉取子模块和静态路由子模块，放在并一起编译成js文件，部署在nodejs编写的渲染服务器上，并由渲染服务器启动时加载
S3具体可以为：渲染服务器启动时会加载编译好的React应用，当请求到达时，渲染服务器将请求通过函数调用并传入参数的方式传递给React应用。
S4具体可以为：React应用中数据拉取子模块通过分析渲染服务器传入的请求，判断需要展示的页面，并计算这些页面内容需要的数据，将需要的数据组织成一个数据拉取请求返回给渲染服务器。
S8具体可以为：React应用收到渲染服务器传进来的数据后，将数据交给静态路由子模块，静态路由子模块将数据与无数据的页面模板进行绑定，得到带有数据内容的页面，并将页面渲染成html字符串。
通过采用这种方式，可以将原本只能在浏览器端运行的React应用在服务器端也运行起来，其中关键的数据拉取子模块和静态路由子模块是与业务无关的，也就是说所有的React应用都可以用同样的数据拉取子模块和静态路由子模块，通过这种方式就可以将原本只能在浏览器端渲染的React应用很轻松的改造成可以在服务器端运行的React应用，满足服务器端渲染的需求
通过采用本发明公开的上述技术方案，得到了如下有益的效果：本发明实施例提供的基于React和Nodejs的服务端渲染方法，在使用React开发前端页面的基础上，为了避免使用React这种客户端渲染方法，无法进行搜索引擎抓取和搜索引擎优化的问题，在已有的React应用的基础上，利用nodejs实现一个渲染服务器，通过引入数据拉取和静态路由两个子模块实现在服务器端渲染出原本只能在浏览器上才能渲染出的React应用，从而可以在服务端直接输出完整页面的html，而不需要通过js在浏览器再次渲染一遍，方便了React应用的搜索引擎抓取和搜索引擎优化。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (1)

1.一种基于React和Nodejs的服务端渲染方法，其特征在于，包括如下步骤：
S1，编译期，将原有的前端渲染的React项目加入数据拉取子模块和静态路由子模块后编译打包为一个整体，成为React服务端应用js文件，并将该文件部署在Nodejs编写的渲染服务器上，渲染服务器启动时加载js文件；其中，所述静态路由子模块为React应用中的StaticRouter组件；
S2，浏览器请求渲染服务器；
S3，渲染服务器调用React应用；
S4，React应用中的数据拉取子模块负责产生数据拉取请求；
S5，渲染服务器将数据拉取请求发给后台服务器；
S6，后台服务器返回所请求的数据；
S7，渲染服务器拿到数据，传入React应用；
S8，React应用中的静态路由子模块渲染出html页面；
S9，渲染服务器将html返回给浏览器；
S10，浏览器根据html渲染出页面；
S3具体为：渲染服务器启动时会加载编译好的React应用，当请求到达时，渲染服务器将请求通过函数调用并传入参数的方式传递给React应用；
S4具体为：React应用中数据拉取子模块通过分析渲染服务器传入的请求，判断需要展示的页面，并计算这些页面内容需要的数据，将需要的数据组织成一个数据拉取请求返回给渲染服务器；
S8具体为：React应用收到渲染服务器传进来的数据后，将数据交给静态路由子模块，静态路由子模块将数据与无数据的页面模板进行绑定，得到带有数据内容的页面，并将页面渲染成html字符串。
CN201811031228.1A 2018-09-05 2018-09-05 一种基于React和Nodejs的服务端渲染方法 Active CN109324788B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811031228.1A CN109324788B (zh) 2018-09-05 2018-09-05 一种基于React和Nodejs的服务端渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811031228.1A CN109324788B (zh) 2018-09-05 2018-09-05 一种基于React和Nodejs的服务端渲染方法

Publications (2)

Publication Number Publication Date
CN109324788A CN109324788A (zh) 2019-02-12
CN109324788B true CN109324788B (zh) 2020-11-06

Family

ID=65263981

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811031228.1A Active CN109324788B (zh) 2018-09-05 2018-09-05 一种基于React和Nodejs的服务端渲染方法

Country Status (1)

Country Link
CN (1) CN109324788B (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110442325A (zh) * 2019-07-24 2019-11-12 上海易点时空网络有限公司 基于nodejs渲染池的架构模型以及页面处理方法
CN111078231A (zh) * 2019-11-22 2020-04-28 浙江蓝卓工业互联网信息技术有限公司 可视化界面组件热部署方法和客户端、服务端
CN113282851A (zh) * 2020-02-18 2021-08-20 北京沃东天骏信息技术有限公司 一种应用集成系统和应用集成方法
CN111880790A (zh) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 页面渲染方法、页面渲染系统和计算机可读存储介质
CN111880788A (zh) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 页面渲染方法、装置、客户端和计算机可读存储介质
CN111880789A (zh) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 页面渲染方法、装置、服务端和计算机可读存储介质
CN111859236B (zh) * 2020-06-19 2022-07-08 苏州浪潮智能科技有限公司 一种基于动态表单校验的服务器渲染页面生成方法与系统
CN112667945A (zh) * 2020-12-25 2021-04-16 政和科技股份有限公司 一种基于前后端分离技术开发网站的seo优化方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107590145A (zh) * 2016-07-06 2018-01-16 北京神州泰岳软件股份有限公司 一种页面静态资源的处理方法和装置
CN107766532A (zh) * 2017-10-27 2018-03-06 深圳市行云易通科技有限公司 一种前端Node.js自动化正静态方法
WO2018133452A1 (zh) * 2017-01-20 2018-07-26 华为技术有限公司 一种网页渲染方法及相关设备

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107632826B (zh) * 2016-07-14 2021-03-02 腾讯科技（深圳）有限公司 一种源代码的编译方法和客户端
US10613834B2 (en) * 2016-09-17 2020-04-07 Oracle International Corporation Systems and method for supporting reactive responses using a dependency injection framework

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107590145A (zh) * 2016-07-06 2018-01-16 北京神州泰岳软件股份有限公司 一种页面静态资源的处理方法和装置
WO2018133452A1 (zh) * 2017-01-20 2018-07-26 华为技术有限公司 一种网页渲染方法及相关设备
CN107766532A (zh) * 2017-10-27 2018-03-06 深圳市行云易通科技有限公司 一种前端Node.js自动化正静态方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
ReactJS服务端同构实践;腾讯大讲堂;《腾讯云https://cloud.tencent.com/developer/article/1042740》;20180213;第1页 *

Also Published As

Publication number Publication date
CN109324788A (zh) 2019-02-12

Similar Documents

Publication Publication Date Title
CN109324788B (zh) 一种基于React和Nodejs的服务端渲染方法
US7814410B2 (en) Initial server-side content rendering for client-script web pages
US6463578B1 (en) Systems, methods and computer program products for debugging java server page files using compiled java class file modifications
US9460222B2 (en) System for rewriting dynamically generated uniform resource locators in proxied hyper text markup language content in accordance with proxy server rules
US9143378B2 (en) Rendering components within different browser environments
US8924867B2 (en) Web interface for remote platform build
US7860927B2 (en) Inspecting web browser state information from a synchronously-invoked service
CN113010827B (zh) 页面渲染方法、装置、电子设备以及存储介质
CN110598135A (zh) 网络请求处理方法、装置、计算机可读介质及电子设备
US8745485B2 (en) Extensible remote tag markup system and method
US8140575B2 (en) Apparatus, method, and program product for information processing
US20110145699A1 (en) Annotation driven representational state transfer (rest) web services
CN110928545B (zh) 组件分发方法、单页应用的开发方法、装置及存储介质
CN111310005A (zh) 网络请求的处理方法及装置、服务器和存储介质
KR20130085856A (ko) 이종 웹서비스의 조합 응용에서 웹서비스 호출을 위한 위젯 자동 생성 방법 및 그 장치
CN105871961B (zh) 一种灰度发布路由的方法及装置
JP5151696B2 (ja) ユニフォームリソースロケータ情報を書き換えるプログラム
CN113836469A (zh) 网站前端开发方法和设备
JP5039946B2 (ja) クライアント装置およびサーバ装置の間の通信を中継する技術
CN110738024A (zh) 将WebAPP转换为API服务接口的方法
CN116126347B (zh) 一种低代码应用程序的文件编译系统和方法
CN115168770A (zh) 一种页面生成方法、装置、电子设备及介质
CN105808727A (zh) 基于html5的网站跨屏适配技术架构和适配方法
CN111338928A (zh) 基于chrome浏览器测试的方法及装置
Losada et al. Efficient execution of web navigation sequences

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant