在前端开发中，React 是一个非常流行的框架。在大型应用中，将 React 与服务器端渲染 (SSR) 结合使用可以改善用户体验和 SEO。Express.js 是一种快速而灵活的后端框架，它可以帮助我们快速搭建 SSR 应用。
本文将介绍如何使用 Express.js 并结合 React 搭建 SSR 应用。我们将从安装并配置项目开始，直到最后的部署。本文需要读者具备基本的 React 和 Node.js 知识。
安装并配置项目
创建项目文件夹，并在其中使用
npm init命令初始化项目。安装 Express.js：
npm install express --save。安装 React 和 ReactDOM：
npm install react react-dom --save。安装 babel 相关的依赖：
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev。创建
.babelrc文件，并添加如下配置代码：{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
在项目文件夹中创建一个名为
server.js的文件，并添加如下内容：-- -------------------- ---- ------- -- ---- ----- ------- - ------------------- ----- ----- - ----------------- ----- -------------- - ---------------------------- -- -- ------- -- ----- --- - ---------- -- ---- ------------ ----- ---- -- - -- ------ ----- -- ----- ---- - -------------------------------------------------------- ----- ------ ---------- --------------- --- -- ----- ---------------- -- -- - ------------------- ------- -- ------------------------- ---
展开代码启动服务器：
node server.js。现在可以在浏览器中访问http://localhost:3000/并查看“Hello World!”的文本。
使用 React 组件进行 SSR
现在，我们已经可以在服务端渲染一个简单的 React 组件。我们将创建一个更复杂的组件，并在服务端渲染该组件。
创建一个名为
MyComponent.js的文件，并添加如下代码：-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------------- - ------ - ----- --------- ----- ---- ----------- ------- -- -- ------- -- ----- ----- -- --- ------ ---- ---- -------- ------ -- - ------ ------- ------------
展开代码修改
server.js文件，引入MyComponent并在路由处理函数中使用该组件：const MyComponent = require('./MyComponent').default; // 定义路由 app.get('/', (req, res) => { // 在服务端渲染 React 组件 const html = ReactDOMServer.renderToString(React.createElement(MyComponent)); res.send(html); });
停止并重启服务器，刷新浏览器以查看效果。
使用 React Router 进行路由
现在，我们已经可以在服务端渲染一个带有 React 组件的页面。为了创建一个完整的 SSR 应用，我们需要使用 React Router 管理路由。我们将创建一个具有两个页面的应用，其中一个页面是主页，另一个页面是关于页面。
安装
react-router-dom：npm install react-router-dom --save。创建一个名为
App.js的文件，并添加如下代码：-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ ------ - ---- ------------------- ------ ----------- ---- ---------------- -------- ------ - ------ - ----- ------------- ------------ -- ------ -- - -------- ------- - ------ - ----- -------------- ------- -- -- ------- ----- --------- ------ -- - -------- ----- - ------ - -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- --------- -- - ------ ------- ----
展开代码修改
server.js文件，在路由处理函数中使用StaticRouter和renderToNodeStream替换以前的renderToString。处理函数应如下所示：-- -------------------- ---- ------- ----- --- - ------------------------- ----- - ------------ - - ---------------------------- ------------ ----- ---- -- - ----- ------- - --- ----- ------------ - ---------------------------------- ------------- ------------------ ------------------ ---- -- --------------- -- -------------------- -------- -------------------- -------------------- ----------------------- --- --------------- --------------------- -------------------- ---------------------- - ---- ----- --- ---------------------- -- -- - --------------------- --------------------- ---------- --- ---
展开代码停止并重启服务器，访问
http://localhost:3000/查看主页，访问http://localhost:3000/about查看关于页。
部署应用
现在，我们已经成功创建了具有服务端渲染功能的 React 应用。我们可以将其部署到生产环境中。
构建应用：使用 webpack 打包应用代码，并在
server.js中加载打包后的文件。配置 Nginx：配置 Nginx 将来自客户端的请求代理到本地的 Express.js 服务器上。以下是示例配置：
-- -------------------- ---- ------- ------ - ------ --- ----------- ------------ -------- - - ---------------- ---- ------ ---------------- --------- ------------- ---------- ---------------------- - -
展开代码启动应用：在服务器上启动应用，并使用 PM2 管理进程。
现在，我们已经成功地将 React SSR 应用部署到生产环境中，并可以在生产环境中享受其带来的好处，例如快速渲染和更好的 SEO。
本文提供了一个基础的 React SSR 应用搭建指南，读者可以基于此进行探索和拓展。通过这种方式，我们可以使用 React 和 Express.js 将前端渲染的性能和服务器端渲染的好处相结合，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2bcdd314edc2684c39da2
