在开发 React 单页应用（SPA）时，很多开发者会面临一个问题，那就是应用的内容无法被搜索引擎抓取。这是因为 SPA 应用通常的路由是通过 JavaScript 动态生成的，因此搜索引擎的爬虫无法直接获取这些页面内容。本文将介绍一些防止 React SPA 应用被爬虫抓取的技巧。
1. 服务器端渲染（SSR）
服务器端渲染是指在服务器端渲染页面并返回 HTML，而不是在浏览器端通过 JavaScript 渲染页面。这样可以让搜索引擎爬虫抓取到完整的 HTML 页面内容，从而提高了搜索引擎的可索引性。
在 React 上进行服务器端渲染有多种方式，比如 Next.js 和 React SSR 等。
以下是一个使用 Next.js 进行服务器端渲染的示例：
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
export default (req, res) => {
const html = renderToString(<App />);
res.send(`<!DOCTYPE html>${html}`);
};2. 预渲染（Prerendering）
预渲染是指在构建应用时生成静态 HTML 文件，并将其上传到服务器供搜索引擎爬虫访问。这样搜索引擎爬虫可以直接访问到完整的 HTML 页面内容，而无需执行 JavaScript 代码。
React 应用可以通过 react-snap 工具来进行预渲染。它会启动一个本地服务器，访问你的应用，并将渲染过的 HTML 文件保存下来。你可以将这些 HTML 文件上传到服务器，供搜索引擎爬虫访问。
以下是一个使用 react-snap 进行预渲染的示例：
npm install -g react-snap react-snap
3. 元标签（Meta Tag）
另一个让搜索引擎爬虫获取完整内容的方法是使用元标签。你可以在 HTML 的 head 标签中添加一个特殊的元标签，告诉搜索引擎爬虫执行 JavaScript 并获取完整内容。
以下是一个使用元标签的示例：
<head> <meta name="fragment" content="!"> <!-- other head tags --> </head>
4. 动态 XML SiteMap
一个 XML 网站地图是一个文件，其中列出了一个网站中的所有可访问链接。为了防止搜索引擎爬虫无法找到你的已生成页面，你可以为你的 React SPA 应用创建一个动态 XML SiteMap。
你可以像下面这样编写一个使用 React Router 动态生成 XML 网站地图的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------------ ------- - ---- ---------
------ - ------ - ---- -----------
------ - ------ - ---- ---------------
----- ------- - -- -- -
------------
---------------
-
----------- -
----- -
---- -
----
------- -
------------
-
-
-
-
-
--
---------- ------------ - ------ ----- - -- -- -
----- ---------- - ------ ------------- ------------------
------- ----------------------------------------------------
-----
-----------------------------------------
--------------------- ------- ------------------------
------
-------
---------- ----- - ---- - -- -- ---- --- ----
------- ----- - ----- -------- - ------------ - - - ------------- ---- - - -- -- -
-- --------------- -
------ ---
-
------ -
-----
------------------------------------------------
------------------------------- ------------------------
------
--
--
------------
---------
--
------ -
----------------
------- --------------- -------- ----- --------- -------- --------- --------- --- --
-----------------------
-----------------
--
--
--
--
------ ------- --------结论
以上是一些防止 React SPA 应用被爬虫抓取的技巧，你可以根据你的需求选择使用。使用服务器端渲染可以提高应用可索引性，同时更好的支持 SEO；使用预渲染可以让应用在被搜索引擎爬虫抓取时能够显示完整内容；使用元标签可以让搜索引擎爬虫获取到完整内容；使用动态 XML SiteMap 可以让搜索引擎爬虫更好的了解你的站点结构。
希望这篇文章能够帮助你了解如何防止 React SPA 应用被爬虫抓取，并希望你能够根据自己的需求选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbdd7f447136260165c68b