如何在没有 nodejs 服务器的情况下使用 ReactDOMServer.renderToStaticMarkup

Question

我想使用 ReactDOMServer.renderToStaticMarkup 创建一个静态网站，但我只想在构建期间生成一次 html 字符串，而不是为每个请求动态生成

这里有相关文档，但没有详细介绍实现 https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

在构建期间使用 React 一次生成 html 而不是在每个页面请求上动态生成的最佳实践是什么？我正在使用 webpack。

Answer 1

对于任何来这里寻找答案的人，我是这样做的：

1. 为你的 SSR 反应创建一个单独的 webpack 配置文件，就像 webpack.ssr.js。该文件将具有您通常用于 React SSR 的相同配置。
2. 在 index.js 文件中通常有 ReactDOM.render、运行 ReactDOMServer.renderToStaticMarkup 函数。
3. 在index.js文件中，将html字符串写入文件：

const html = ReactDOMServer.renderToStaticMarkup(App);

fs.writeFile("index.html", html, (err) => {
  if (err)
    console.log(err);
  else {
    console.log("File written successfully\n");
  }
});

4. 每次构建后，将构建文件作为节点脚本执行。例如 node build.js。我建议在 package.json 中将其作为构建后脚本来执行。例如：

postbuild: "node build.js"

5. fs.writeFile 将在每次构建时更新 index.html 文件，因此您只需要像使用任何其他静态文件一样提供 index.html网站。

6. 对于 css 模块，您将使用 isomorphic-style-loader 之类的东西，而不是常规的 style-loader.

7. 如果您使用的是 react-router 之类的东西，则需要遍历所有路由，并且 运行 ReactDOMServer.renderToStaticMarkup 和 fs.writeFile每条路线。然后，您将使用服务器端路由提供不同的 html 文件。

8. 这也适用于使用 ReactDOMServer.renderToString 的普通 SSR，尤其是当您不需要基于 ID 之类的动态 SSR 时。对于生成加载屏幕服务器端，这很棒而且确实没有理由在 运行 时间动态生成 html。