CN110598146B - 基于Reactjs的SPA应用程序实现方法以及装置 - Google Patents

Abstract

本申请公开了一种基于Reactjs的SPA应用程序实现方法以及装置。该方法包括根据搜索请求接收服务器输出的页面HTML文档，其中所述HTML文档中具有已被搜索引擎收录的内容；当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容。本申请解决了搜索引擎无法支持搜索传统模式开发的SPA应用程序的术问题。通过本申请实现了SPA应用程序对SEO友好。

Description

基于Reactjs的SPA应用程序实现方法以及装置

技术领域

本申请涉及WEB前端开发领域，具体而言，涉及一种基于Reactjs的SPA 应用程序实现方法以及装置。

背景技术

SPA应用程序，是指单页Web应用(英文全称single page web application， 简称：SPA)，就是只有一张Web页面的应用，是加载单个HTML页面并在用 户与应用程序交互时动态更新该页面的Web应用程序。

发明人发现，搜索引擎无法支持搜索传统模式开发的SPA应用程序。

针对相关技术中搜索引擎无法支持搜索传统模式开发的SPA应用程序的 问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种基于Reactjs的SPA应用程序实现方 法以及装置，以解决搜索引擎无法支持搜索传统模式开发的SPA应用程序问 题。

为了实现上述目的，根据本申请的一个方面，提供了一种基于Reactjs 的SPA应用程序实现方法，用于在搜索引擎搜索出SPA应用程序的内容。

根据本申请的基于Reactjs的SPA应用程序实现方法包括：根据搜索请 求接收服务器输出的页面HTML文档，其中所述HTML文档中具有已被搜索 引擎收录的内容；当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬 取与链接关联的页面内容。

进一步地，根据搜索请求接收服务器输出的页面HTML文档时，包括： 增加针对Nodejs环境的webpack配置；其中，所述webpack配置是指webpack.server.config.js。

进一步地，根据搜索请求接收服务器输出的页面HTML文档时，还包括： 在Nodejs服务器根据浏览器的URL请求中的路径，并将对应的页面渲染成 HTML，填充到HTML文档的中；将携带有关键内容同时对应URL请求路径 的HTML文档输出给客户端。

进一步地，当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取 与链接关联的页面内容时，包括：当用户在客户端点击时服务器通过URL链 接爬取与链接关联的页面内容，并通过本地历史记录进行路由。

进一步地，当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取 与链接关联的页面内容时，包括：搜索引擎的搜索爬虫在爬取页面中的链接时， 请求标签点击事件中的路径，并通过服务器进行资源请求；接收在客户端内点 击标签的请求，通过拦截标签点击事件的默认执行路径，并通过本地历史记录 进行路由。

为了实现上述目的，根据本申请的另一方面，提供了一种基于Reactjs 的SPA应用程序实现装置，用于在搜索引擎搜索出SPA应用程序的内容。

根据本申请的基于Reactjs的SPA应用程序实现装置包括：输出模块， 用于根据搜索请求接收服务器输出的页面HTML文档，其中所述HTML文档 中具有已被搜索引擎收录的内容；爬取模块，用于当搜索引擎的搜索爬虫在爬 取页面中的链接时，通过链接爬取与链接关联的页面内容。

进一步地，所述输出模块，用于

增加针对Nodejs环境的webpack配置；

其中，所述webpack配置是指webpack.server.config.js。

进一步地，装置还包括：配置模块，用于

在Nodejs服务器根据浏览器的URL请求中的路径，并将对应的页面渲染 成HTML，填充到HTML文档的中；

将携带有关键内容同时对应URL请求路径的HTML文档输出给客户端。

进一步地，所述爬取模块，用于

当用户在客户端点击时服务器通过URL链接爬取与链接关联的页面内 容，并通过本地历史记录进行路由。

进一步地，所述爬取模块，用于

搜索引擎的搜索爬虫在爬取页面中的链接时，请求标签点击事件中的路 径，并通过服务器进行资源请求；

接收在客户端内点击标签的请求，通过拦截标签点击事件的默认执行路径， 并通过本地历史记录进行路由。

在本申请实施例中基于Reactjs的SPA应用程序实现方法以及装置， 采用根据搜索请求接收服务器输出的页面HTML文档的方式，通过当搜索引 擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容， 达到了SPA应用程序对SEO友好的目的，从而实现了使得搜索引擎可以检 索出应用程序的内容的技术效果，进而解决了搜索引擎无法支持搜索传统模 式开发的SPA应用程序的的技术问题。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本 申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及 其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请第一实施例的基于Reactjs的SPA应用程序实现方法 流程示意图；

图2是根据本申请第二实施例的基于Reactjs的SPA应用程序实现方法 流程示意图；

图3是根据本申请第三实施例的基于Reactjs的SPA应用程序实现方法 流程示意图；

图4是根据本申请实施例的基于Reactjs的SPA应用程序实现装置结构 示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施 例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所 描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申 请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所 有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第 一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次 序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请 的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆 盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品 或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的 或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本申请中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、 “内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置 关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本申 请及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方 位，或以特定方位进行构造和操作。

并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于 表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或 连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在 本申请中的具体含义。

此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广 义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连 接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两 个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可 以根据具体情况理解上述术语在本申请中的具体含义。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征 可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

如图1所示，该方法包括如下的步骤S102至步骤S104：

步骤S102，根据搜索请求接收服务器输出的页面HTML文档，

用于在搜索引擎搜索出SPA应用程序的内容，所述HTML文档中具有已 被搜索引擎收录的内容。

步骤S104，当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬 取与链接关联的页面内容。

具体地，以reactjs开发的SPA为例进行说明。

由于在用reactjs开发SPA应用程序时，页面的内容全部被打包进 JavaScript(JS)文件中，页面的视图必须等js文件依赖加载完成之后才可以 通过JS渲染出来，所以容易导致服务器端输出的HTML文档只有一个空骨架， 由于搜索引擎爬虫只会爬取并分析HTML文档，存在于js中的关键内容无法 被百度等搜索引擎友好的爬取出来，因而相关搜索引擎无法搜索传统模式 reactjs开发的SPA应用程序。

为了让reactjs开发的SPA应用对SEO友好，即要想让搜索引擎可以检索 出应用程序的内容，则需要实现在服务器输出的HTML文档中必须包含需要 被搜索引擎收录的内容，并且通过搜索爬虫爬取页面中的链接时，可以通过链 接爬取链接关联的页面内容。

从以上的描述中，可以看出，本申请实现了如下技术效果：

在本申请实施例中基于Reactjs的SPA应用程序实现方法以及装置，采用 根据搜索请求接收服务器输出的页面HTML文档的方式，通过当搜索引擎的 搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容，达到 了SPA应用程序对SEO友好的目的，从而实现了使得搜索引擎可以检索出应 用程序的内容的技术效果，进而解决了搜索引擎无法支持搜索传统模式开发的 SPA应用程序的的技术问题。

根据本申请实施例，作为本实施例中的优选，根据搜索请求接收服务器输 出的页面HTML文档时，包括：增加针对Nodejs环境的webpack配置；其中， 所述webpack配置是指webpack.server.config.js。

具体地，在传统的reactjs开发中，只有一份针对客户端的webpack配置 文件webpack.client.config.js，在本申请的实施例中新增加一份针对Nodejs环 境的webpack配置webpack.server.config.js，webpack服务端配置的关键是设置 target为node目标。每次执行webpack构建时会生成两个js入口文件，如客 户端：entry.client.js，服务器端：entry.server.js。

根据本申请实施例，作为本实施例中的优选，如图2所示，根据搜索请求 接收服务器输出的页面HTML文档时，还包括：

步骤S202，在Nodejs服务器根据浏览器的URL请求中的路径，并将对 应的页面渲染成HTML，填充到HTML文档的中；

步骤S204，将携带有关键内容同时对应URL请求路径的HTML文档输 出给客户端。

具体地，在Nodejs服务器根据浏览器的URL请求中的path，端通过ReactDOMServer.renderToString方法将对应的页面渲染成HTML，填充到 HTML空骨架中。

进一步，

将带有关键内容同时对应URL请求路径的HTML文档输出给客户端，客 户端接受到HTML之后，利用ReactDOM.hydrate方法将服务端渲染的HTML 激活为react托管的虚拟DOM。

通过上述步骤实现了，在服务器输出的HTML文档中必须包含需要被搜 索引擎收录的内容。

根据本申请实施例，作为本实施例中的优选，当搜索引擎的搜索爬虫在爬 取页面中的链接时，通过链接爬取与链接关联的页面内容时，包括：当用户在 客户端点击时服务器通过URL链接爬取与链接关联的页面内容，并通过本地 历史记录进行路由。

根据本申请实施例，作为本实施例中的优选，如图3所示，当搜索引擎的 搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容时，包 括：

步骤S302，搜索引擎的搜索爬虫在爬取页面中的链接时，请求标签点击 事件中的路径，并通过服务器进行资源请求；

步骤S304，接收在客户端内点击标签的请求，通过拦截标签点击事件的 默认执行路径，并通过本地历史记录进行路由。

通过上述步骤实现了，通过搜索爬虫爬取页面中的链接时，可以通过链接 爬取链接关联的页面内容。具体地，以a标签为例。

基于<a href＝"/path/to/page">标签点击默认执行的是通过服务器进行资源请求，由于传统reactjs的SPA进行页面跳转时都是通过本地history进行路由， 因而需要保证对于a标签，当用户在客户端点击的时候，执行的是history本 地跳转：

进一步地，

首先，搜索引擎爬取时，会请求a中的路径，默认通过服务器进行资源请 求；

其次，当客户端内点击a标签时，通过event.preventDefault拦截a的默认 执行，然后通过本地history进行路由跳转。这个过程通过reactjs进行组件化 包装<Link to＝"/path/to/page"/>。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行 指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某 些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述方法的基于Reactjs的SPA 应用程序实现装置，用于在搜索引擎搜索出SPA应用程序的内容，如图4所 示，该装置包括：输出模块10，用于根据搜索请求接收服务器输出的页面HTML 文档，其中所述HTML文档中具有已被搜索引擎收录的内容；爬取模块20， 用于当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联 的页面内容。

根据上述模块，具体地，以reactjs开发的SPA为例进行说明。

由于在用reactjs开发SPA应用程序时，页面的内容全部被打包进 JavaScript(JS)文件中，页面的视图必须等js文件依赖加载完成之后才可以 通过JS渲染出来，所以容易导致服务器端输出的HTML文档只有一个空骨架， 由于搜索引擎爬虫只会爬取并分析HTML文档，存在于js中的关键内容无法 被百度等搜索引擎友好的爬取出来，因而相关搜索引擎无法搜索传统模式 reactjs开发的SPA应用程序。

为了让reactjs开发的SPA应用对SEO友好，即要想让搜索引擎可以检索 出应用程序的内容，则需要实现在服务器输出的HTML文档中必须包含需要 被搜索引擎收录的内容，并且通过搜索爬虫爬取页面中的链接时，可以通过链 接爬取链接关联的页面内容。

根据本申请实施例，作为本实施例中的优选，所述输出模块10，用于

增加针对Nodejs环境的webpack配置；

其中，所述webpack配置是指webpack.server.config.js。

具体地，在传统的reactjs开发中，只有一份针对客户端的webpack配置 文件webpack.client.config.js，在本申请的实施例中新增加一份针对Nodejs环 境的webpack配置webpack.server.config.js，webpack服务端配置的关键是设置 target为node目标。每次执行webpack构建时会生成两个js入口文件，如客 户端：entry.client.js，服务器端：entry.server.js。

根据本申请实施例，作为本实施例中的优选，还包括：配置模块30，用 于

在Nodejs服务器根据浏览器的URL请求中的路径，并将对应的页面渲染 成HTML，填充到HTML文档的中；

将携带有关键内容同时对应URL请求路径的HTML文档输出给客户端。

具体地，在Nodejs服务器根据浏览器的URL请求中的path，端通过ReactDOMServer.renderToString方法将对应的页面渲染成HTML，填充到 HTML空骨架中。

进一步，

将带有关键内容同时对应URL请求路径的HTML文档输出给客户端，客 户端接受到HTML之后，利用ReactDOM.hydrate方法将服务端渲染的HTML 激活为react托管的虚拟DOM。

根据本申请实施例，作为本实施例中的优选，所述爬取模块20，用于

当用户在客户端点击时服务器通过URL链接爬取与链接关联的页面内 容，并通过本地历史记录进行路由。

根据本申请实施例，作为本实施例中的优选，所述爬取模块20，用于

搜索引擎的搜索爬虫在爬取页面中的链接时，请求标签点击事件中的路 径，并通过服务器进行资源请求；

接收在客户端内点击标签的请求，通过拦截标签点击事件的默认执行路 径，并通过本地历史记录进行路由。

通过上述步骤实现了，通过搜索爬虫爬取页面中的链接时，可以通过链接 爬取链接关联的页面内容。具体地，以a标签为例。

基于<a href＝"/path/to/page">标签点击默认执行的是通过服务器进行资源请求，由于传统reactjs的SPA进行页面跳转时都是通过本地history进行路由， 因而需要保证对于a标签，当用户在客户端点击的时候，执行的是history本 地跳转：

进一步地，

首先，搜索引擎爬取时，会请求a中的路径，默认通过服务器进行资源请 求；

其次，当客户端内点击a标签时，通过event.preventDefault拦截a的默认 执行，然后通过本地history进行路由跳转。这个过程通过reactjs进行组件化 包装<Link to＝"/path/to/page"/>。

本申请的实现原理如下：

传统reactjs开发中，只有一份针对客户端的webpack配置文件webpack.client.config.js，本申请实施例中新增加一份针对nodejs环境的 webpack配置webpack.server.config.js，webpack服务端配置的关键是设置target 为node目标。每次执行webpack构建时会生成两个js入口文件，如客户端： entry.client.js，服务器端：entry.server.js；nodejs服务器根据浏览器的url请求 中的path，端通过ReactDOMServer.renderToString方法将对应的页面渲染成 HTML，填充到HTML空骨架中；将带有关键内容同时对应url请求路径的 HTML文档输出给客户端，客户端接受到HTML之后，利用ReactDOM.hydrate 方法将服务端渲染的HTML激活为react托管的虚拟DOM。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以 用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多 个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码 来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们 分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集 成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领 域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则 之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之 内。

Claims (6)

1.一种基于Reactjs的SPA应用程序实现方法，其特征在于，用于在搜索引擎搜索出SPA应用程序的内容，所述方法包括：

根据搜索请求接收服务器输出的页面HTML文档，其中所述HTML文档中具有已被搜索引擎收录的内容；

当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容；

根据搜索请求接收服务器输出的页面HTML文档时，包括：

增加针对Nodejs环境的webpack配置；

其中，所述webpack配置是指webpack.server.config.js；

webpack服务端配置包括：设置target为node目标；

每次执行webpack构建时会生成两个js入口文件，包括客户端和服务器端；

根据搜索请求接收服务器输出的页面HTML文档时，还包括：

在Nodejs服务器根据浏览器的URL请求中的路径，并将对应的页面渲染成HTML，填充到HTML文档的中；

将携带有关键内容同时对应URL请求路径的HTML文档输出给客户端；

还包括：将带有关键内容同时对应URL请求路径的HTML文档输出给客户端，客户端接受到HTML之后，利用ReactDOM.hydrate方法将服务端渲染的HTML激活为react托管的虚拟DOM。

2.根据权利要求1所述的基于Reactjs的SPA应用程序实现方法，其特征在于，当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容时，包括：

当用户在客户端点击时服务器通过URL链接爬取与链接关联的页面内容，并通过本地历史记录进行路由。

3.根据权利要求1所述的基于Reactjs的SPA应用程序实现方法，其特征在于，当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容时，包括：

搜索引擎的搜索爬虫在爬取页面中的链接时，请求标签点击事件中的路径，并通过服务器进行资源请求；

接收在客户端内点击标签的请求，通过拦截标签点击事件的默认执行路径，并通过本地历史记录进行路由。

4.一种基于Reactjs的SPA应用程序实现装置，其特征在于，用于在搜索引擎搜索出SPA应用程序的内容，所述装置包括：

输出模块，用于根据搜索请求接收服务器输出的页面HTML文档，其中所述HTML文档中具有已被搜索引擎收录的内容；

爬取模块，用于当搜索引擎的搜索爬虫在爬取页面中的链接时，通过链接爬取与链接关联的页面内容；

所述输出模块，用于

增加针对Nodejs环境的webpack配置；

其中，所述webpack配置是指webpack.server.config.js；

webpack服务端配置包括：设置target为node目标；

每次执行webpack构建时会生成两个js入口文件，包括客户端和服务器端还包括：配置模块，用于

在Nodejs服务器根据浏览器的URL请求中的路径，并将对应的页面渲染成HTML，填充到HTML文档的中；

将携带有关键内容同时对应URL请求路径的HTML文档输出给客户端；

还包括：将带有关键内容同时对应URL请求路径的HTML文档输出给客户端，客户端接受到HTML之后，利用ReactDOM.hydrate方法将服务端渲染的HTML激活为react托管的虚拟DOM。

5.根据权利要求4所述的基于Reactjs的SPA应用程序实现装置，其特征在于，所述爬取模块，用于

当用户在客户端点击时服务器通过URL链接爬取与链接关联的页面内容，并通过本地历史记录进行路由。

6.根据权利要求4所述的基于Reactjs的SPA应用程序实现装置，其特征在于，所述爬取模块，用于

搜索引擎的搜索爬虫在爬取页面中的链接时，请求标签点击事件中的路径，并通过服务器进行资源请求；

接收在客户端内点击标签的请求，通过拦截标签点击事件的默认执行路径，并通过本地历史记录进行路由。

Images