随着前端技术的不断发展，单页面应用（Single Page Application，SPA）越来越流行。SPA 的优势在于用户体验极佳、响应速度快，但是它也有它的缺陷，例如首次加载慢、SEO 不友好等。为了解决这些问题，前端工程师们开始尝试使用服务器端渲染（Server Side Rendering，SSR）。
本文将分享一个从 Node.js 到 React SPA 的 SSR 实践过程。通过这个实践，你可以掌握如何使用 Node.js 实现 SSR，并通过 React 实现 SPA 首次渲染加速和 SEO 优化。
为什么需要服务端渲染？
在单页面应用中，首次加载时需要将整个 SPA 渲染出来，用户需要等待渲染完成才能进行交互。在一些网络状况差或设备配置低的情况下，这样的等待时间可能会非常长，用户的交互体验会受到影响。
此外，由于单页面应用中的内容是通过 JavaScript 来渲染的，搜索引擎无法通过 JavaScript 来识别网站的内容，因此单页面应用对 SEO 不友好。而服务器端渲染则可以将页面在服务器端渲染出来，直接返回给用户，不需要等待 JavaScript 加载完成，因此可以在首次加载时大大减少等待时间，提升用户体验。另外，针对搜索引擎，服务器端渲染可以将 HTML 直接返回给搜索引擎，提升 SEO。
实现 SSR 的原理
服务端渲染的实现原理就是在服务端进行页面渲染，然后将渲染后的 HTML 直接返回给客户端。这可以通过多种方式来实现。我们这里介绍一个基于 Node.js 的 SSR 实现方案。
第一步：创建一个 Node.js 服务器
首先需要创建一个 Node.js 服务器，用于处理客户端的请求。可以使用 Express 或 Koa 等常用的 Node.js 框架来创建服务器。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- ------ -------------------------------- - ------------ -- ---- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
在这个示例中，我们使用了 express 来创建服务器，并对所有请求都返回一个字符串 "Hello World!"。
第二步：创建一个 React 组件
接下来，我们需要创建一个 React 组件，它将作为我们的前端界面，以便服务器端能够渲染它。
import React from 'react';
const App = () => {
return <div>Hello World!</div>;
};
export default App;在这个示例中，我们创建了一个简单的 React 组件，它只是简单地返回一个 div，内容是 "Hello World!"。
第三步：使用 React 渲染组件
在这一步中，我们将使用 React 在服务器端渲染我们的组件，并将渲染后的 HTML 直接返回给客户端。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------
------ - ------------ - ---- ---------------
------ ------- ---- ----------
------ --- ---- --------
----- --- - ----------
----- ---- - ---------------- -- -----
----------------------------------
------------ ----- ---- -- -
----- ------- - ---
----- ------ - ---------------
------------- ------------------ ------------------
---- --
---------------
--
----------
--------- -----
------
------
------------- ---- -------- ----- -----------
-------
------
---- -------------------------
------- --------------------------
-------
-------
---
---
---------------- -- -- -
------------------- -- --------- -- ---- ----------
---在这个示例中，我们使用了 React 的 renderToString 方法将组件渲染为 HTML 字符串，并插入到 HTML 页面模板中。在模板中，我们还插入了一个 script 标签，包含了我们的前端代码，这个前端代码可以再次在客户端中运行。
第四步：客户端代码处理
在客户端代码中，我们需要使用 React 的 hydrate 方法来让 React 重新渲染页面，以便能够接管由服务器生成的 HTML。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
--------
---------------
---- --
-----------------
-------------------------------
--在这个示例中，我们使用了 React 的 hydrate 方法来重新渲染页面。使用 BrowserRouter 组件代替 StaticRouter 组件，使得客户端 JS 能够控制路由。
第五步：使用 Webpack 打包前端代码
在最后一步中，我们使用 Webpack 打包我们的前端代码，以便将其作为一个 JavaScript 文件提供给客户端。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- ----------
--------- -----------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- ----------------
-
-
--
-------- -
----------- ----- ------ -------
-
--在这个示例中，我们使用了 Webpack 对前端代码进行打包，并将其输出到 public 目录下的 bundle.js 文件中。
总结
通过这个实践，我们学习了如何使用 Node.js 实现 SSR，以及如何使用 React 实现 SPA 首次渲染加速和 SEO 优化。在这个过程中，我们使用了 React 的 renderToString 方法将组件渲染为 HTML 字符串，并使用 Webpack 打包前端代码。最后，我们使用 React 的 hydrate 方法将前端代码重新渲染为前端页面。
Server Side Rendering 并不适用于所有场景，它的优势在于针对大型应用场景，例如电子商务、在线教育等等，这些应用场景更加注重负载速度和 SEO 兼容性。如果你正在做这样的应用，那么 SSR 可能是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ca5aa968c7c53b0f12e4a