不使用 Next.js 的 React 服务器端渲染

🫵 好的。言归正传。我该怎么做？

🫵 好了！就这样了吗？

GitHub 仓库： https://github.com/webcrumbs-community/webcrumbs

我们已经为 WebCrumbs 运行了一系列实验，探索 React 组件的服务器端渲染 (SSR)。

事实证明这并不是那么难。

您所需要的只是一点点和express，以使其保持简单。ReactDOMServer.renderToStringReactDOM.hydrateWebpack

这是一个例子。当然，它可能会更复杂，但你明白我的意思。

支持我们！🙏⭐️

顺便说一句，我是 WebCrumbs 团队的一员，如果您能看看我们简化 Web 开发的 Node.js 无代码解决方案，那将非常感激。给我们一颗星就太好了。

我们付出了大量的努力来帮助开发人员尽可能快速、轻松地将他们的想法带到实时网站上（想想：轻松的插件和主题集成），我们非常感谢每一点支持！

⭐️ 给 WebCrumbs 一颗星！⭐️

好的。现在，让我们重新探讨一下不使用 Next.js 进行 React 服务器端渲染的实用性。

🫵 好的。言归正传。我该怎么做？

要创建具有客户端功能（client-side hydration）的简单 React 服务器端渲染 (SSR) 应用程序，您需要遵循几个步骤。

这涉及使用 Express 设置 Node.js 服务器、创建 React 组件、在服务器端渲染它，然后在客户端对其进行补充。

以下是分步指南：

步骤 1：设置您的项目

创建新目录：为您的项目创建一个新目录并导航到该目录。



mkdir react-ssr-demo
cd react-ssr-demo

初始化 npm：初始化一个新的 npm 项目。



npm init -y

安装依赖项：安装 Express 和 React 相关的包。



npm install express react react-dom

第 2 步：创建服务器

编写服务器代码：创建一个文件server.js并写入以下代码：



const express = require('express');
const ReactDOMServer = require('react-dom/server');
const React = require('react');
const SampleComponent = require('./SampleComponent'); // Replace with your component

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    const componentStr = ReactDOMServer.renderToString(React.createElement(SampleComponent));

    res.send(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>React SSR with Client-Side Hydration</title>
    </head>
    <body>
      <div id="root">${componentStr}</div>
      <script src="/bundled-client.js"></script>
    </body>
    </html>
  `);
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}/`);
});

以下是上述代码的解释：

加载 Express、React、ReactDOMServer。
定义用于渲染的基本 React 组件。
初始化 Express 服务器。
创建一个路由来处理对根（“/”）URL 的 HTTP GET 请求。
使用 ReactDOMServer 将 React 组件转换为 HTML 字符串。
在 HTML 中包含一个脚本，用于在客户端补充服务器呈现的组件。
监听端口 3000 上的请求并记录启动消息。

步骤 3：为客户端代码配置 Webpack

创建 Webpack 配置：在项目根目录中创建一个 webpack.config.js 文件。



const path = require('path');

module.exports = {
  entry: './client.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundled-client.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

创建水合逻辑：在您的项目中，创建一个名为的新文件client.js：



import React from 'react';
import ReactDOM from 'react-dom';
import SampleComponent from './SampleComponent'; // Replace with your component

ReactDOM.hydrate(
  <SampleComponent />,
  document.getElementById('root')
);