一种基于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应用的搜索引擎抓取和搜索引擎优化。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。