概述
React 单页面应用（SPA）对于用户交互、体验方面有很大的优势，但是在 SEO 上不如传统的多页面应用（MPA）效果显著，主要原因是由于 SPA 只有一个 HTML 文件，搜索引擎爬虫只能获取到一个静态的页面内容，无法发现应用中的动态数据。然而，SEO 相关的问题并非不可解决，本文将详细介绍 SPA 开发中 SEO 的问题以及相关的优化方案。
SEO 问题
1. 静态化
单页面应用通过 JavaScript 来动态渲染页面，所以在搜索引擎爬虫访问时，爬取到的是一个空白的 HTML 文件，这对于 SEO 产生了很大的影响。在首次加载页面时，需要对页面进行渲染，所以需要进行静态化处理。
2. Meta 标签
为了让搜索引擎更好的理解页面的内容，我们需要对页面的 meta 标签进行优化，包括 title、description、keywords 等等。
3. 服务器渲染
如果我们使用服务器渲染（SSR）的方式，那么，爬虫访问服务端渲染的 HTML 文件可以直接看到与用户看到的内容一致，这样就可以有效的解决 SPA 的 SEO 问题。
4. 本地存储
可以使用 localstorage 等本地存储方式来将一些核心内容缓存下来，在下次访问的时候，直接从缓存取得数据渲染页面。
优化方案
1. 静态化
在 React SPA 中，可以使用 prerender-spa-plugin 插件来完成静态化工作。通过该插件对单页面应用进行预渲染，生成 HTML、CSS、JS 文件，同时使用 Headless Chrome 来模拟用户交互，将网络请求中的所有数据本地缓存，最终将静态内容输出至 HTML 中，这样爬虫爬到的页面内容就是已经渲染好的了。
使用方法如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - --------------------------------
--- --------------------
-- ------------ ---
------ ------------------------ ------- -----
-- ---------
---------------- -----
-- -------
--------------- -----
------------- ----------
-- ------------
---------- ------------------------ --------
---------- ------------------------ --------
-- -- -------- ------ ----------- ------
--------- --- ----------
------------------------- -----------
---------------
--
--在使用 PrerenderSpaPlugin 之前需要进行必要的配置。
2. Meta 标签
在 React SPA 中，使用 react-helmet 这个 React 组件可以优化 meta 标签。react-helmet 可以将 React 组件中的数据注入到页面的 head 中，从而进行优化，如下：
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- -------- - -- -- -
-----
--------
-------------------
----- ------------------ -------------- --
----- --------------- -------- --
---------
---
------
--3. 服务器渲染
服务器渲染可以让页面在服务端渲染，前端页面只做页面的交互与事件的绑定而不需要渲染页面。使用 Next.js 框架可以很容易地实现服务器渲染。
在 Next.js 中，页面分为三种：
- 静态页面：不会根据用户的请求而变化的页面，如：About 页面
- 动态页面：会根据 URL 参数变化而变化的页面，如：/post/123
- 服务端渲染页面：使用服务器端数据渲染的页面，如：/api/posts
使用 Next.js 开发时，只需要在 pages 文件夹下创建文件即可轻松实现 SEO，如下：
-- -------------------- ---- -------
-- ---- --------
-------- ------- -
------ -
-----
------- -- --- ----- --------
------
-
-
------ ------- -----4. 本地存储
为了减少网络请求，React SPA 可以使用 localstorage 缓存页面基本数据。因为 localstorage 的存储格式只支持字符串，所以需要将数据转换为字符串再存储，如下：
// 存储数据
localStorage.setItem('data', JSON.stringify(data));
// 获取数据
const data = JSON.parse(localStorage.getItem('data'));总结
React SPA 开发时，需要注意 SEO 的问题，通过静态化、Meta 标签优化、服务器渲染、本地存储四种优化方案，可以解决 React SPA 的 SEO 问题。前三种方案是 React SPA 中比较重要的，其中本地存储属于辅助优化。在具体使用时，可以根据实际情况选择方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648033ab48841e9894fb1512