前言
随着 Web 技术的不断发展，前端应用变得越来越复杂，单页应用 (SPA) 也成为了 Web 开发中的主流之一。然而，由于 SPA 的特性，它对搜索引擎的友好程度较低，对于需要 SEO 的应用来说，这是一个很大的问题。本文将介绍 SPA 实现 SEO 的最佳实践之一：服务器端渲染 (SSR)。
什么是服务器端渲染 (SSR)
服务器端渲染 (SSR) 是指将页面组件在服务器端进行渲染，生成 HTML 代码，并将其发送到客户端，而不是在客户端进行渲染。使用 SSR 可以使搜索引擎更容易地抓取网页内容，提高 SEO 的效果。同时，SSR 也可以提高首屏加载速度，提高用户体验。
如何实现 SSR
在实现 SSR 之前，我们需要先了解 SPA 的原理。SPA 通过 JavaScript 动态生成页面内容，而且通常只有一个 HTML 文件，这个文件里面只有一个 div 标签，所有的页面内容都是通过 JavaScript 动态生成的。这就是 SPA 的优点，但也是导致它 SEO 不友好的原因之一。
为了实现 SSR，我们需要在服务器端进行渲染，生成 HTML 代码，并将其发送到客户端。这需要使用一些框架和库来实现。下面是一个使用 React 和 Express 实现 SSR 的示例代码：
1. 安装依赖
npm install express react react-dom react-router-dom npm install @babel/core @babel/preset-env @babel/preset-react babel-loader npm install webpack webpack-cli
2. 创建服务器端代码
-- -------------------- ---- -------
-- ---------
------ ------- ---- ----------
------ ----- ---- --------
------ -------------- ---- -------------------
------ - ------------ - ---- -------------------
------ --- ---- --------
----- --- - ----------
----------------------------------
------------ ----- ---- -- -
----- ------- - ---
----- ---- - ------------------------------
------------- ------------------ ------------------
---- --
---------------
--
-- ------------- -
--------------------------
- ---- -
----------
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
---- -----------------------
------- --------------------------
-------
-------
---
-
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
---3. 创建客户端代码
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
-----------------
---------------
---- --
-----------------
-------------------------------
--4. 创建打包配置文件
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ ------------------
------- -
----- ----------------------- ----------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
--5. 创建 App 组件
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
----- --- - -- -- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------------- --
---------
--
--
------ ------- ----6. 创建页面组件
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
-----
-------- ---------
---------- -- -- --------
------
--
--
------ ------- ------- -------------------- ---- -------
-- --------
------ ----- ---- --------
----- ----- - -- -- -
------ -
-----
--------- ---------
------- -- --- ----- ---------
------
--
--
------ ------- -------- -------------------- ---- -------
-- -----------
------ ----- ---- --------
----- -------- - -- -- -
------ -
-----
------- --- ----------
------ --------- ---- ----- --- -- ----------
------
--
--
------ ------- ---------7. 创建 HTML 模板
-- -------------------- ---- -------
---- ----------------- ---
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
---- ----------------
------- --------------------------
-------
-------8. 打包客户端代码
npx webpack --config webpack.config.js
9. 启动服务器
node server.js
现在，在浏览器中访问 http://localhost:3000 就可以看到我们的应用了。如果你打开开发者工具，可以看到页面的 HTML 代码已经由服务器端渲染完成。
总结
本文介绍了 SPA 实现 SEO 的最佳实践之一：服务器端渲染 (SSR)。我们通过一个使用 React 和 Express 实现 SSR 的示例代码，详细讲解了如何实现 SSR。如果你正在开发一个需要 SEO 的 SPA 应用，希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66175f2cd10417a22273cd18