在现代的 Web 开发中，服务器端渲染已经成为一个重要的话题。ssr-react-router4 是一个 npm 包，它可以帮助我们快速地实现基于 React Router 4 的服务器端渲染。在本文中，我们将介绍如何使用 ssr-react-router4 进行服务器端渲染的步骤，以及一些常见问题的解决方案。
安装和初始化 ssr-react-router4
首先，我们需要使用 npm 安装 ssr-react-router4：
npm install ssr-react-router4
接着，我们需要创建一个初始化文件。在项目的根目录下创建一个名为 server.js 的文件，内容如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ----------------- - - ----------------------------- ----- --- - ---------- ---------------------------------- ------------ ----- ---- -- - ----- -------- - -------------------- ----- ---- - -------------- --------------- --- ---------------- -- -- - ------------------- -- --------- -- ------------------------ ---
其中，我们通过 getServerRenderer() 函数得到一个渲染函数 renderer。
创建 React 应用
然后，我们需要创建一个基于 React 的应用。在本文中，我们将使用以下文件结构：
project/ ├── src/ │ ├── components/ │ │ ├── App.js │ │ ├── Home.js │ ├── index.js └── package.json
其中，src/index.js 是我们的客户端入口文件，它内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- -------------------
-----------------
---------------
---- --
-----------------
-------------------------------
--在 src/components/App.js 中，我们定义了一个基本的路由，以便我们测试服务器端渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ------- -------- ----- -
------ -
--------
------ ----- -------- ---------------- --
---------
--
-在 src/components/Home.js 中，我们定义了一个简单的页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------ -
------ -
-----
----------- -- -- ------------
------- --- --- ---- --- ----- -- ----------- ----------
------
--
-修改服务器端代码
现在，我们需要修改服务器端代码，以便它可以渲染我们的 React 应用。首先，我们需要在 server.js 文件中添加以下代码：
-- -------------------- ---- -------
----- - --------- - - ----------------------------
----- ------ - ------------------------
------------ ----- ---- -- -
----- -------- - --------------------
----- ------- - ---
----- ---- - ------------- ---------
-- ------------- -
--------------------------
- ---- -
---------------
-
---其中，我们将 getServerRenderer() 函数的返回值赋给变量 renderer，并将 req 和 context 作为参数传递给它。然后，我们判断 context.url 是否存在，如果存在则重定向到指定页面，否则发送 HTML 响应。
接下来，我们需要定义 src/routes.js 文件，如下所示：
-- -------------------- ---- -------
------ ---- ---- --------------------
------ ------- -
-
----- ----
------ -----
---------- ----
-
--然后，我们修改 src/index.js 文件，添加以下代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
------ ------ ---- -----------
-----------------
---------------
----------------------
-----------------
-------------------------------
--这里，我们使用 renderRoutes() 函数来渲染路由。renderRoutes() 会根据路由定义从而渲染相应的组件。
配置 webpack
在这一步中我们将修改 webpack 配置使其能够正确地打包服务器端和客户端代码。我们需要添加一个新文件 webpack.config.server.js 到根目录下，内容如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - ----------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- -----------
----- ----------------------- -------
--
------- -------
---------- ------------------
------- -
------ -
-
----- --------------
-------- ---------------
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-我们需要设置 target 属性为 node，因为我们要在服务器端使用 webpack 打包代码。而 externals 属性则指出了哪些模块不应该被打包，因为它们在服务器端已经存在。
接着，我们还需要在 package.json 文件中添加以下命令：
"build:client": "webpack", "build:server": "webpack --config webpack.config.server.js", "build": "npm run build:client && npm run build:server"
运行 npm run build 即可编译客户端和服务器端代码。
测试！
运行 npm start，我们就可以在浏览器中访问 http://localhost:3000 了。如果一切正常，我们应该能够看到服务器渲染出来的页面，而且在浏览器中查看源代码时，我们应该可以看到所有的页面内容已经在服务器端渲染出来。
附加说明
如果你想要更多的路由，可以在 src/routes.js 中定义它们。并且注意要修改 src/index.js 中调用 renderRoutes() 的方式。
ssr-react-router4 也允许我们将 props 传递给路由，进而传递给组件，在一些情况下非常有用。相关的信息可以在文档中找到。
结论
通过使用 ssr-react-router4 的 npm 包，我们可以轻松地在服务器端渲染 React 应用。虽然本文并未涵盖所有功能，但它对于入门或者进行参考还是很有用的。
目前，最流行的服务器端渲染方案是 Next.js 和 Gatsby，但是它们都有一些限制，如果你想要更多的自由度，可以尝试使用 ssr-react-router4 等 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0381e8991b448d9a0e