背景和原理
React 作为目前流行的前端框架之一，其自带的虚拟 DOM 和组件化开发方式，让开发者能够更高效地构建、调整 Web 应用的界面。
但在传统的客户端渲染模式下（CSR），首屏加载时间常常被网络状况、资源大小和代码复杂度限制，尤其在低性能设备上，用户体验很容易受到影响。
服务端渲染（SSR）则是将组件在服务器端预先渲染，发送到客户端时只需要传输 HTML、CSS 和 JS，从而减少客户端的计算负担和页面加载时间，提升性能和用户体验。
虽然 React 本身可以配合 Node.js 实现 SSR，但如何在实际项目中做到高效、灵活、稳定，是一个值得深入探讨的问题。
oly-react-ssr 就是一个由国内开发者在 SSR 领域倡导并贡献的 npm 包，旨在提供一个易用、高效的 SSR 框架方案。
其原理核心是利用 express、react、webpack 等常用的模块，将客户端渲染转换为服务端渲染，同时通过 webpack 预编译打包，将开发体验尽可能地接近 CSR 模式。
安装和基础使用
- 前置依赖：确保已经安装 Node.js 和 npm。
- 创建一个基于 oly-react-ssr 的新项目，可以通过 npm init 快速创建一个空白的 package.json 文件。
- 在项目根目录运行以下命令：
npm install oly-react-ssr --save
- 在根目录下创建 app.js，引入 oly-react-ssr：
-- -------------------- ---- ------- -- ------ ----- ------- - ------------------- ----- ------------- - ------------------------- ----- --- - ---------- ----- ---- - ----- ---------------- -- -- - ------------------- -- --------- -- ---------- --- ----- --- - --- ------------- ----------- ---- -- ------ ------ ---------------- -- --- ---- --------- ------------------- -- ---- -- ------- -- -- -- --- ------------------------------- -- ----- ------------ ----- ---- -- - --------------- ----- ---
这是一个最简单的使用示例，ssr 实例化时需要传入四个参数：
- publicPath: 静态资源路径，通常是 '/'。
- entry: SSR 服务入口组件，可以是文件或者绝对路径。
- template: HTML 模板，需要在里面插入 webpack 打包后的 JS 和 CSS。
- routes: 路由，定义了所有页面的路径和对应的组件。
在 app.use() 中，需要注册 ssr.mandateMiddleware 作为中间件。
最后设置一个自定义路由 /，在该路由匹配时，调用 ssr.render(req, res) 渲染出完整的 HTML 返回给客户端。
进阶应用
添加样式和文件
如果需要添加样式文件，将样式文件引入 entry 中即可，如：
-- -------------------- ---- -------
-- -------
------ ---------------------
-------- ----- -
------ -
---- ----------------------
---
------
--
-oly-react-ssr 会自动压缩和打包样式文件到 dist 目录下，同时在 HTML 模板中引入，如：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
--------- -----------
----- ------------------------------- ------------------------
---------- -------------- ---------------------- -------- ------- ---- -- ---- ---------------
------- ----- -------------------------------------------------- ----- -----------------------------------------------
-------同时，需要在 webpack 配置中添加对应的 loader，如：
-- -------------------- ---- -------
-------------- - -
---
------- -
------ -
-
----- ---------
---- -
- ------- -------------- --
- ------- ------------- -------- - -------- ---- - --
--
--
--
--
--处理 SEO
由于 SSR 是服务器端渲染，因此可以通过在 HTML 中输出完整的文档头，包括 meta、title、link 等标签，可以更好地支持 SEO。
oly-react-ssr 提供了一个 handleDocument() 方法，用于处理 document 文档，可以通过继承 OlyReactSSR 类，重写该方法实现自定义文档头，如：
-- -------------------- ---- -------
----- ------------- - -------------------------
----- ----------------- ------- ----------- -
------------------- ---- ------ -
----- ----- - --- --- -----
----- ----------- - ----- -- - ---- --- -----
----- -------- - ------- ---- ---------
----- ----- - ---------------------------
----- ---- - -
- ----- -------------- -------- ----------- --
- ----- ----------- -------- -------- --
- --------- ----------- -------- ----- --
- --------- ----------------- -------- ----------- --
- --------- ----------- -------- ----- --
- --------- --------- -------- ------------ - ----- - --------------- - --------------- --
--
------ ------------------------- ---- -
------
-----
--------
---
-
-在子类中可以调用 super.handleDocument() 并传入修改后的 props，即可以在 document 中添加自定义的 meta 标签。
加载数据
React 组件中如果需要加载异步数据，通常需要在 componentDidMount() 中发起网络请求，并在 setState() 中更新数据，这种方式对于 CSR 来说没有问题，但在 SSR 中，客户端和服务器端组件的生命周期不完全相同，在组件渲染之前很难获得异步数据，因此需要在特定的钩子函数中处理数据。
oly-react-ssr 提供了两种处理数据的方式：
1. 通过钩子函数加载数据
用 withLoadData() HOC 将组件装饰一下即可：
-- -------------------- ---- -------
------ -------------- ---- ----------------
----- -------- ------- --------------- -
------ ----- -------------- ---- -
----- ---- - ----- --------------------
------ - ---- --
-
-------- -
----- - ---- - - -----------
------ -
---- ----------------------
----------- -- -- --- --------
-------------
------
--
-
-
------ ------- -----------------------withLoadData() 将会在服务器端 postMount 和服务器端 render 函数之前自动调用 fetchData()，并将返回的数据传递给组件。
2. 使用 getInitialProps()
getInitialProps() 是 Next.js 的方式，返回一个 Promise，可以支持 class component 和 functional component，是在函数组件 Class 组件中可以使用
-- -------------------- ---- -------
----- -------- ------- --------------- -
------ ----- ----------------- ---- --- -- -
----- ---- - ----- --------------------
------ - ---- --
-
-------- -
----- - ---- - - -----------
------ -
---- ----------------------
----------- -- -- --- --------
-------------
------
--
-
-
------ ------- ---------与 withLoadData() 相比，getInitialProps() 可以直接在组件内定义，更方便自定义加载方式和处理异步数据的逻辑。
总结
oly-react-ssr 是一个优秀的 SSR 框架，基于 Node.js 平台和 React 技术栈，提供了简单易用、高效稳定、灵活可配置的服务端渲染方案。
在实际开发中，我们可以通过定制样式、自定义文档头、加载异步数据等方式，增强 SSR 的应用效果。
如果你还在考虑 SSR 是否值得尝试，在经过这篇文章的阐述后，相信你已经对 SSR 有了更深入的理解和信心。
享受 SSR 带来的高性能和前端开发的乐趣吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc02