在前端开发中，我们经常会遇到 SEO（Search Engine Optimization）的问题。为了解决这个问题，我们可以使用可以让搜索引擎抓取并解析 JavaScript 网站的 prerender 策略，将静态 HTML 发送给搜索引擎。
prerenderer 是一个基于 Node.js 服务端渲染的工具，可以帮助我们将 Vue、React、Angular 等单页应用转换为静态 HTML 输出供搜索引擎抓取。本文将会对这个工具进行详细介绍，并提供示例代码以供参考。
安装
首先，我们需要安装 prerenderer。可以使用 npm 进行安装：
npm i prerenderer --save-dev
常用配置
prerenderer 可以用来处理单页应用及其路由，还可以处理静态或是动态转发路由。接下来让我们来看看配置中一些常用的选项：
routes
这里是一个简单的代码示例，用于展示 routes 配置：
-- -------------------- ---- -------
----- ----------- - -----------------------
----- -------- - -----------------------------
----- ------ - --------- --------- ------------
------ -- -- -
--- ------ ----- -- ------- -
----- - ---- - - ----- ----------------------------
------------------
-
-----在这个代码片段中，我们创建了一个 prerenderer 渲染器实例，并配置了一个包含 '/home'、'/about' 和 '/contact' 三个路由的路由列表。使用 .renderRoute() 方法对路由进行预渲染。
prerender.port
这个选项用于配置 prerenderer HTTP 服务的监听端口。默认是 3000。
以下是一个使用默认端口 3000 的服务示例：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- -------- - ----------------------------- ----- --------- - --------------------------- ------------------ ------------------ ----- ----- ---- -- - ----- - ---- - - ----- ------------------------------ ------ --------------------------- --- -----------------
prerender.timeout
这个选项用于配置 prerenderer 渲染器的超时时间，单位是毫秒。默认值是 20000 毫秒（即 20 秒）。
以下是一个示例，配合超时时间为 1000 毫秒的 prerenderer 渲染器：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- -------- - ---------------------------- -------- ----- --- ------ -- -- - ----- - ---- - - ----- ------------------------------ ------------------ -----
prerender.userAgent
这个选项用于配置 prerenderer 渲染器所使用的用户代理。
以下是一个示例，配置 User-Agent 为 Chrome 浏览器：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- -------- - ---------------------------- ---------- ---------------------- --- ------ -- -- - ----- - ---- - - ----- ------------------------------ ------------------ -----
第三方插件
除了上述常用配置选项之外，prerenderer 还支持各种插件和中间件。这就增强了 prerenderer 的功能和扩展性。
以下是一些推荐使用的第三方插件：
prerenderer-plugin-puppeteer
puppeteer 是一款由 Chrome 开发团队开发的 Node.js 库。它提供了对 Chrome 和 Chromium 浏览器的无头控制，用来模拟浏览器行为进行渲染。prerenderer-plugin-puppeteer 基于此，提供了更精准的渲染效果。
以下是一个使用 prerenderer-plugin-puppeteer 的示例：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- ------ - ---------------------------------------- ----- -------- - ---------------------------- ------------------------- ------------ -------- ----------- --- ------ -- -- - ----- - ---- - - ----- ------------------------------ ------------------ -----
prerenderer-plugin-wait-for-element
prerenderer-plugin-wait-for-element 插件可用于等待页面中的某个特定元素出现才进行渲染。
以下是一个使用 prerenderer-plugin-wait-for-element 插件的示例：
-- -------------------- ---- -------
----- ----------- - -----------------------
----- ------ - -----------------------------------------------
----- -------- - ----------------------------
------------------------- ------------
-------- -
--------
--------- -----------
---
--
---
------ -- -- -
----- - ---- - - ----- ------------------------------
------------------
-----总结
本篇文章简要介绍了 npm 包 prerenderer 的使用教程。我们见到了 routes、prerender.port、prerender.timeout、prerender.userAgent 等常用配置。
同时也提到了可扩展的选项，如使用第三方插件以实现定制化的渲染效果。我们鼓励您去查阅官方文档以了解更多信息。
一个较完整的示例代码：
-- -------------------- ---- -------
----- ----------- - -----------------------
----- ------ - ----------------------------------------
----- -------- - ----------------------------
------------------------- ------------
-------- -----
---------- ----------------------
-------- -
---------
--
---
----- --------- - ---------------------------
------------------
------------------ ----- ----- ---- -- -
----- - ---- - - ----- ------------------------------
------ ---------------------------
---
-----------------使用这个代码，我们可以在本地启动一个 prerenderer 的 HTTP 服务，监听本地 3000 端口。该服务将使用 Puppeteer 渲染来自机器上的单页应用，并可拦截路由动态转发。用户代理将被设置为 Chrome。
最后，我们希望您能够在生产环境中使用这个工具，并将其应用到您的项目中，以帮助您的产品更好地被搜索引擎收录和排名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730881e8991b448e933b