单页应用（SPA）目前已经成为前端开发的热门技术。但是 SPA 存在一个严重的问题：不利于搜索引擎优化（SEO）。因为 SPA 只有一个 HTML 文件，页面的内容都在 JavaScript 中渲染，搜索引擎爬虫无法获取到页面的真实内容，导致页面无法被正常收录。那么如何解决 SPA 中的 SEO 问题呢？本文将介绍一种解决方案：预渲染技术。
预渲染技术
预渲染技术是指在服务器端将 SPA 的 HTML 文件进行预先渲染，然后将渲染好的静态页面返回给客户端。这样搜索引擎爬虫就能够获取到完整的渲染好的页面内容，从而可以正常收录页面。
预渲染技术常见的两种实现方式是：
- 服务端渲染（SSR）：在服务器上通过模板渲染引擎渲染出 HTML 文件。
- 预编译静态页面：在开发环境中编写一些脚本，将 SPA 所有页面进行预编译，将编译结果存放到服务端的文件系统中，然后在客户端请求时直接返回这些预编译好的静态 HTML 文件。
这两种方式各有优缺点，本文将主要介绍第二种方式。
利用预渲染技术解决 SPA 的 SEO 问题
以 React 为例，一个典型的 SPA 应用通常如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
---------- ------------
-------
------
---- ----------------
------- -----------------------
-------
-------从上面的代码可以看出，我们的 SPA 只有一个 HTML 文件，里面只包含了 JavaScript 脚本的引入，在客户端中通过 JavaScript 渲染页面。但是搜索引擎无法收录这样的页面，因为它无法识别 JavaScript。
我们可以使用类似于 prerender-spa-plugin 的 Webpack 插件来预渲染 SPA 的页面。该插件会在打包时自动将 SPA 的所有路由进行预编译，并将渲染好的静态 HTML 页面存放在服务端。
安装插件：
npm i -D prerender-spa-plugin
在 webpack.config.js 文件中加入配置项：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-- ---
-------- -
--- --------------------
-- ------ ----- ------ ------
---------- -------------------- --------
-- -------- - ------ -- ---------
------- ----- --------- ------------
-- ------ --- ---- ---- ---- ---- ----------- --------
--------- --- --------------------------------------
-- -------- - ---- -- ------ ----- --- --------- ------- --- ------
---------------- -----
---
---
--
--此时运行打包命令时，插件会将 SPA 的所有路由进行预编译，并将编译结果存放到服务端的静态文件系统中。例如，访问 /about 页面时，预渲染插件会将 /about 页面的 HTML 文件渲染好，并将渲染好的 HTML 文件存放到服务端静态文件系统的 /about/index.html 文件中。然后在客户端请求 /about 页面时，服务器直接返回 /about/index.html 文件，从而搜索引擎能够获取到这个页面的完整内容，实现 SEO 优化。
总结
预渲染技术是解决 SPA SEO 问题的一种方案。将 SPA 中的页面进行预渲染，生成静态 HTML 页面后存放在服务端的文件系统中，从而实现搜索引擎收录 SPA 页面的目的。
通过 Webpack 插件 prerender-spa-plugin 可以很方便地实现预渲染功能，最终将预编译后的 HTML 页面存放在服务器的静态文件系统中，在客户端请求时直接返回这些预编译好的静态 HTML 文件。
预渲染技术的实现方式有多种，但无论哪种方式都需要在开发过程中充分考虑 SEO 问题，提高页面的收录率和排名，从而提高网站的流量和转化率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64931b5348841e98940e455e