在前端开发中，使用 Single Page Application（SPA） 可以为用户提供更好的用户体验，但是 SPA 也有个缺点，搜索引擎无法抓取 JavaScript 页面。这里介绍一个 npm 包 hapi-spa-prerender，它可以解决这个问题，使在 SPA 中使用 SEO 成为可能。
hapi-spa-prerender 简介
hapi-spa-prerender 是一个用于 hapi 的插件。它使用 PhantomJS 技术来预渲染 JavaScript 页面的 HTML 代码，并可以将其呈现给搜索引擎的爬虫，以促进更好的搜索结果。
安装
npm install hapi-spa-prerender --save
使用方法
- 在你的 hapi 项目中，引入 hapi-spa-prerender 插件
-- -------------------- ---- -------
---- --------
----- ---- - ----------------
----- ------------- - ------------------------------
----- ------ - --- --------------
-------------------
----- ------------
----- ----
---
------------------------------ ----- -- -
-- ----- -
----- ----
-
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- ----- -----------------
---
---- 安装 PhantomJS
hapi-spa-prerender 需要使用 PhantomJS 来生成预渲染的 HTML 代码，因此需要先安装 PhantomJS。
npm install phantomjs-prebuilt --save
- 配置 hapi-spa-prerender
配置项可以包括：
prerender.serviceUrl：PhantomJS 服务的地址。prerender.prerenderedHeaderName：发送给 PhantomJS 服务的 header 名称。默认值为X-Prerendered.prerender.timeout：PhantomJS 操作超时时间（单位毫秒）。默认值为 60000。prerender.whitelist：需要预渲染的 路径前缀数组prerender.blacklist：不需要预渲染的 路径前缀数组
-- -------------------- ---- -------
-
--------- --------------
-------- -
---------- -
----------- ------------------------
---------------------- ----------------
-------- ------
---------- -----
---------- -------
-
-
-示例代码
-- -------------------- ---- -------
---- --------
----- ---- - ----------------
----- ------------- - ------------------------------
----- ------ - --- --------------
-------------------
----- ------------
----- ----
---
------------------------------ -
---------- -
----------- ------------------------
---------------------- ----------------
-------- ------
---------- -----
---------- -------
-
-- ----- -- -
-- ----- -
----- ----
-
--------------
------- ------
----- ----
-------- -------- --------- ------ -
-------------------
-
---
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- ----- -----------------
---
---总结
使用 hapi-spa-prerender 可以让搜索引擎抓取 JavaScript 页面，从而使得 SEO 功能得到提升。在 hapi 项目中，只需要安装及配置 hapi-spa-prerender 插件及 PhantomJS 即可快速实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29e2