前言
服务器端渲染（Server-side rendering，SSR）是近年来前端领域的热门话题之一。与传统的客户端渲染（Client-side rendering，CSR）相比，SSR 可以提供更好的性能、更好的 SEO、更好的用户体验等等。而 React 作为目前最流行的前端框架之一，也提供了相关的 SSR 解决方案。本文将介绍如何使用 Koa+Webpack 搭建 React 服务器端渲染应用。
环境准备
在开始之前，我们需要准备好以下环境：
- Node.js：本文使用 Node.js v12.18.4。
- NPM：本文使用 NPM v6.14.6。
创建项目
首先，我们需要创建一个新的项目，并安装相关依赖。在命令行中执行以下命令：
mkdir koa-webpack-react-ssr cd koa-webpack-react-ssr npm init -y npm install koa koa-static koa-router react react-dom react-router-dom webpack webpack-cli webpack-dev-middleware webpack-hot-middleware @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader file-loader html-webpack-plugin nodemon --save-dev npm install react-helmet --save npm install react-router-config react-loadable --save
其中，我们安装了以下依赖：
koa：Koa 框架。koa-static：Koa 静态文件中间件。koa-router：Koa 路由中间件。react、react-dom、react-router-dom：React 相关依赖。webpack、webpack-cli、webpack-dev-middleware、webpack-hot-middleware：Webpack 相关依赖。@babel/core、@babel/preset-env、@babel/preset-react、babel-loader：Babel 相关依赖。css-loader、style-loader、file-loader：Webpack 加载 CSS、样式、图片等资源的相关依赖。html-webpack-plugin：Webpack 生成 HTML 文件的插件。nodemon：Node.js 自动重启工具。react-helmet：React 处理页面标题、meta 等 SEO 相关信息的插件。react-router-config：React 路由配置工具。react-loadable：React 异步加载组件的工具。
配置 Webpack
在项目根目录下创建 webpack.config.js 文件，并添加以下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ ------------------------
------- -
--------- ------------
----- ----------------------- ----------
----------- ---
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- ---------------- -------------
--
-
----- ----------------------
---- -
-
------- --------------
--
--
--
-
--
-------- -
--- -------------------
--------- -------------------------
--
--
-------- -------------
---------- -
------------ -------------------- ----------
--------- -----
----- -----
------------------- ----
-
--其中，我们配置了以下内容：
entry：入口文件为./src/client/index.js。output：输出文件为public/bundle.js。module：使用 Babel 和相关 loader 处理 JS 和 JSX 文件，使用 CSS 和样式 loader 处理 CSS 文件，使用 file loader 处理图片等资源文件。plugins：使用 HtmlWebpackPlugin 插件生成 HTML 文件。devtool：开启 source map。devServer：使用 Webpack Dev Server 进行开发，监听localhost:3000，并开启 historyApiFallback，以支持 React Router。
配置 Babel
在项目根目录下创建 .babelrc 文件，并添加以下配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}其中，我们配置了使用 @babel/preset-env 和 @babel/preset-react 处理 JS 和 JSX 文件。
编写客户端代码
在项目根目录下创建 src/client 目录，并在其中创建 index.js 文件和 index.html 文件。在 index.js 文件中，编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ - ------------ - ---- ----------------------
------ ------ ---- -----------
-----------------
---------------
----------------------
-----------------
-------------------------------
--其中，我们使用 React Router 和 react-router-config 配置路由，并使用 hydrate 方法渲染页面。
编写服务器端代码
在项目根目录下创建 src/server 目录，并在其中创建 index.js 文件。在 index.js 文件中，编写以下代码：
-- -------------------- ---- -------
------ --- ---- ------
------ ------ ---- -------------
------ ----- ---- -------------
------ - ----------- - ---- ----------------------
------ - -------------- - ---- -------------------
------ - ------ - ---- ---------------
------ ------ ---- -------------------
------ --- ---- ----------------
----- --- - --- ------
----- ------ - --- ---------
----- ---- - ---------------- -- -----
--------------- ----- ----- ----- -- -
----- ------ - ------------------- ---------
----- -------- - ------------- ------ ----- -- -- -
----- - --------- - - ----------------
------ --------- ---------- -------- - ---------------- - ----------------------
---
----- ---- - ----- ----------------------
----- ------- - ---
----- ------- - ---------------
---- ----------- ------------------ ----------------- --
--
----- ------ - ----------------------
-- --------------- --- ---- -
---------- - ----
-
-- ------------- -
--------------------------
- ---- -
-------- - -
--------- -----
----- ------------------------------------
------
--------------------------
-------------------------
-------------------------
-------
----- ------------------------------------
---- --------------------------
----------------------- - --------------------------------
------- --------------------------
-------
-------
--
-
----- -------
---
-------------------------
-------------------------
---------------- -- -- -
------------------- --------- -- ---- ----------
---其中，我们使用 Koa 和 Koa Router 搭建服务器，使用 React Router 和 react-router-config 配置路由，并使用 renderToString 方法渲染页面。我们还使用 react-helmet 处理页面标题、meta 等 SEO 相关信息，并使用 matchRoutes 方法获取当前路由相关信息。最后，我们使用 hydrate 方法渲染页面，并将数据传递给客户端。
编写路由配置
在 src/client 目录下创建 routes.js 文件，并添加以下代码：
-- -------------------- ---- -------
------ ---- ---- ---------------
------ ----- ---- ----------------
----- ------ - -
-
----- ----
------ -----
---------- -----
---------- -- -- -----------------------
--
-
----- ---------
------ -----
---------- ------
---------- -- -- ------------------------
-
--
------ ------- -------其中，我们配置了两个路由，分别是 / 和 /about，并分别对应了 Home 和 About 两个页面组件，并使用 fetchData 方法获取页面数据。
编写页面组件
在 src/client 目录下创建 pages 目录，并在其中创建 Home.js 和 About.js 文件。在 Home.js 和 About.js 文件中，分别编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------
------ - ---- - ---- -------------------
----- ---- - -- ---- -- -- -
------ -
--
--------
-------------------
----- ------------------ ------------- -- ---- ----- --
---------
-------- ---------
-------------
----- -------------- -- ----- -----------
---
--
--
-------------- - -- -- --------------------- -------
------ ------- ------- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------
------ - ---- - ---- -------------------
----- ----- - -- ---- -- -- -
------ -
--
--------
--------------------
----- ------------------ ------------- -- ----- ----- --
---------
--------- ---------
-------------
----- --------- -- ---- -----------
---
--
--
--------------- - -- -- ---------------------- -------
------ ------- ------其中，我们使用 react-helmet 处理页面标题、meta 等 SEO 相关信息，并使用 Link 组件实现页面之间的跳转。我们还使用 fetchData 方法获取页面数据，并将数据传递给服务器端。
运行项目
在命令行中执行以下命令，启动项目：
npm run dev
然后，在浏览器中访问 http://localhost:3000，即可查看页面效果。
总结
本文介绍了如何使用 Koa+Webpack 搭建 React 服务器端渲染应用。通过本文的学习，我们可以了解到 SSR 的优势，以及如何使用 Koa、Webpack 和 React 等技术，实现 SSR 应用的搭建。同时，我们还了解了 React Router、react-router-config、react-helmet 等相关技术，以及如何处理页面数据、SEO 等相关问题。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657e4453d2f5e1655d914dee