随着互联网的发展，越来越多的网站开始使用单页面应用（SPA）来提供更好的用户体验。这种应用程序的特点是它们只加载一次 HTML，然后通过 AJAX 加载并显示不同的视图，因此用户在与应用程序交互时不必等待每个新页面的 HTML 下载和渲染。 但是，由于搜索引擎爬虫不执行 JavaScript，这种类型的应用程序可能难以使用传统方法进行搜索引擎优化（SEO）。这篇文章将介绍如何优化 React 项目的单页面应用程序以提高其搜索引擎的可见性。
1、React 中使用 SSR（Server-Side Rendering）
在传统的 SPA 应用中，Search Engine 无法通过 AJAX 加载的内容进行索引，可利用服务端渲染框架（SSR），把首屏内容渲染到 HTML 代码中，然后返回给每个搜索引擎爬虫。Express 或 Koa 等后端框架可以用来处理服务器端渲染。
安装
npm install express npm install express-react-views react react-dom
Example Code
-- -------------------- ---- -------
------ ------- ---- ----------
------ ----- ---- --------
------ - -------------- - ---- -------------------
------ --- ---- --------
----- --- - ----------
---------------- ----------------------
------------- -------- -------
----------------- -----------------------------------------------
------------ ----- ---- -- -
----- --------- - ------------------- ----
------------------- - ------ --- ----- ----- --------- ---
---
---------------- -- -- ------------------- ------- -- ---- --------React 组件
为了通过 SSR 来生成 HTML，需要 React 组件的返回变成 JSX，其中有两种方案以供选择：
1.使用类组件，可以将其标记为静态组件，因为静态组件没有状态，可以在 SSR 期间进行高效的缓存:
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ -
-----
---------------------------
------------------------
------
--
-
-
------ ------- ----2.使用函数组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------- -
------ -
-----
----------------------
-------------------
------
--
-
------ ------- ----
---
-- -------- --- ------------ --- ----
--- ---------------------------------------------------------- --- ---
--- --
---
--- ------- ---------- ----------------------
---
--- ------- ----
- ------- ------- ---------------------- ------- ------- -------
---
-- -----------------
----- ------------- - ----------------------------------
-------------- - -
-------- -
--- --------------------------
------------- -----
------------ ----
--
-
--
---
-- --------
----- --- -------------------------------------------------------
-------------------------------------------
--- ------- ----
--------- --- - ----------------------------
---
------
------
----- --------------- ----------------------------------------------------------------------------- --
----- --------------- --
--------- -----------
----- ----------------- ---------------- --
-------
------
---- ----------------
------- --------------------------
--------
-- ------ ---- --- ---- --- -------- ----------
-- ------------------------- --- --- -- ------------------------ --- -------------- -
-------------------- - --------------
-
---------
-------
-------
---
-- ---- ----- ------ ----- ---- --
----- ------ ---------------------
--- --
---
--- ------- ------ ------------
---
--- ------- ----
---
------ ----- ---- --------
------ - ------ - ---- ---------------
-------- ----- -
------ -
-----
--------
--------- -----------
----- ------------------ ------------- -- -- ---- --
---------
--------- ----------
------
--
-
------ ------- ----
---
-- --
---------- ------ --- ------------- ----- ------ ------ ----- ---------- ----
---------------------------------------------------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------