CN109324788A - 一种基于React和Nodejs的服务端渲染方法 - Google Patents
一种基于React和Nodejs的服务端渲染方法 Download PDFInfo
- Publication number
- CN109324788A CN109324788A CN201811031228.1A CN201811031228A CN109324788A CN 109324788 A CN109324788 A CN 109324788A CN 201811031228 A CN201811031228 A CN 201811031228A CN 109324788 A CN109324788 A CN 109324788A
- Authority
- CN
- China
- Prior art keywords
- react
- server
- rendering
- data
- 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.)
- Granted
Links
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的服务端渲染方法。
背景技术
随着互联网的发展，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 (4)
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渲染出页面。
2.根据权利要求1所述的基于React和Nodejs的服务端渲染方法，其特征在于，S3具体为：渲染服务器启动时会加载编译好的React应用，当请求到达时，渲染服务器将请求通过函数调用并传入参数的方式传递给React应用。
3.根据权利要求1所述的基于React和Nodejs的服务端渲染方法，其特征在于，S4具体为：React应用中数据拉取子模块通过分析渲染服务器传入的请求，判断需要展示的页面，并计算这些页面内容需要的数据，将需要的数据组织成一个数据拉取请求返回给渲染服务器。
4.根据权利要求1所述的基于React和Nodejs的服务端渲染方法，其特征在于，S8具体为：React应用收到渲染服务器传进来的数据后，将数据交给静态路由子模块，静态路由子模块将数据与无数据的页面模板进行绑定，得到带有数据内容的页面，并将页面渲染成html字符串。
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 true CN109324788A (zh) | 2019-02-12 |
| CN109324788B 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) |
Cited By (8)
| 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 | 浙江蓝卓工业互联网信息技术有限公司 | 可视化界面组件热部署方法和客户端、服务端 |
| CN111859236A (zh) * | 2020-06-19 | 2020-10-30 | 苏州浪潮智能科技有限公司 | 一种基于动态表单校验的服务器渲染页面生成方法与系统 |
| CN111880788A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、装置、客户端和计算机可读存储介质 |
| CN111880789A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、装置、服务端和计算机可读存储介质 |
| CN111880790A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、页面渲染系统和计算机可读存储介质 |
| CN112667945A (zh) * | 2020-12-25 | 2021-04-16 | 政和科技股份有限公司 | 一种基于前后端分离技术开发网站的seo优化方法 |
| CN113282851A (zh) * | 2020-02-18 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | 一种应用集成系统和应用集成方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107590145A (zh) * | 2016-07-06 | 2018-01-16 | 北京神州泰岳软件股份有限公司 | 一种页面静态资源的处理方法和装置 |
| CN107632826A (zh) * | 2016-07-14 | 2018-01-26 | 腾讯科技（深圳）有限公司 | 一种源代码的编译方法和客户端 |
| CN107766532A (zh) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | 一种前端Node.js自动化正静态方法 |
| US20180081644A1 (en) * | 2016-09-17 | 2018-03-22 | Oracle International Corporation | System and method for supporting reactive responses using a dependency injection framework |
| WO2018133452A1 (zh) * | 2017-01-20 | 2018-07-26 | 华为技术有限公司 | 一种网页渲染方法及相关设备 |
-
2018
- 2018-09-05 CN CN201811031228.1A patent/CN109324788B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107590145A (zh) * | 2016-07-06 | 2018-01-16 | 北京神州泰岳软件股份有限公司 | 一种页面静态资源的处理方法和装置 |
| CN107632826A (zh) * | 2016-07-14 | 2018-01-26 | 腾讯科技（深圳）有限公司 | 一种源代码的编译方法和客户端 |
| US20180081644A1 (en) * | 2016-09-17 | 2018-03-22 | Oracle International Corporation | System and method for supporting reactive responses using a dependency injection framework |
| WO2018133452A1 (zh) * | 2017-01-20 | 2018-07-26 | 华为技术有限公司 | 一种网页渲染方法及相关设备 |
| CN107766532A (zh) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | 一种前端Node.js自动化正静态方法 |
Non-Patent Citations (1)
| Title |
|---|
| 腾讯大讲堂: "ReactJS服务端同构实践", 《腾讯云HTTPS://CLOUD.TENCENT.COM/DEVELOPER/ARTICLE/1042740》 * |
Cited By (9)
| 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 | 北京沃东天骏信息技术有限公司 | 一种应用集成系统和应用集成方法 |
| CN111880788A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、装置、客户端和计算机可读存储介质 |
| CN111880789A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、装置、服务端和计算机可读存储介质 |
| CN111880790A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、页面渲染系统和计算机可读存储介质 |
| CN111859236A (zh) * | 2020-06-19 | 2020-10-30 | 苏州浪潮智能科技有限公司 | 一种基于动态表单校验的服务器渲染页面生成方法与系统 |
| CN111859236B (zh) * | 2020-06-19 | 2022-07-08 | 苏州浪潮智能科技有限公司 | 一种基于动态表单校验的服务器渲染页面生成方法与系统 |
| CN112667945A (zh) * | 2020-12-25 | 2021-04-16 | 政和科技股份有限公司 | 一种基于前后端分离技术开发网站的seo优化方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109324788B (zh) | 2020-11-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109324788A (zh) | 一种基于React和Nodejs的服务端渲染方法 | |
| US9460222B2 (en) | System for rewriting dynamically generated uniform resource locators in proxied hyper text markup language content in accordance with proxy server rules | |
| CN103577597B (zh) | 基于当前浏览页面的关键词搜索系统 | |
| US7320028B2 (en) | Dynamic content delivery to static page in non-application capable environment | |
| US8418131B2 (en) | Interactive server side components | |
| US8131753B2 (en) | Apparatus and method for accessing and indexing dynamic web pages | |
| US7672938B2 (en) | Creating search enabled web pages | |
| US8090800B2 (en) | Method and system for automated web page accessibility coding standards analysis | |
| CN102915318B (zh) | 一种浏览器中定位查找信息的方法和装置 | |
| CN103412890A (zh) | 一种网页加载方法和装置 | |
| CN107590145A (zh) | 一种页面静态资源的处理方法和装置 | |
| US9143378B2 (en) | Rendering components within different browser environments | |
| CN108629032A (zh) | 一种基于延时加载的页面快速响应方法及装置 | |
| US8447874B2 (en) | Web page data streaming | |
| US8745485B2 (en) | Extensible remote tag markup system and method | |
| CN103559097B (zh) | 一种浏览器中进程间通信的方法、装置和浏览器 | |
| CN105528369B (zh) | 网页转码方法、装置以及服务器 | |
| CN110221871A (zh) | 网页获取方法、装置、计算机设备及存储介质 | |
| Shroff et al. | Critical rendering path optimizations to reduce the web page loading time | |
| US8140575B2 (en) | Apparatus, method, and program product for information processing | |
| CN105871961B (zh) | 一种灰度发布路由的方法及装置 | |
| CN110321510A (zh) | 页面渲染方法和系统 | |
| CN111310005A (zh) | 网络请求的处理方法及装置、服务器和存储介质 | |
| SE0201898D0 (sv) | A method and an apparatus for styling a web service | |
| CN104834594B (zh) | web系统测试方法及装置 |
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 |