直接将 React 呈现为 HTML 的静态站点生成器（输出中没有 React）？答案

【问题标题】：Static site generator that renders React to HTML directly (no React in output)?直接将 React 呈现为 HTML 的静态站点生成器（输出中没有 React）？
【发布时间】：2019-03-06 05:35:17
【问题描述】：

Gatsby 或 Jekyll 或任何其他静态站点生成器能否将 React 创作的站点渲染为纯静态 HTML？我希望在 S3/CloudFront 或类似服务器上托管，并且输出中几乎没有 JS。

基本上，我希望创建一个静态网站，但想使用 React 作为开发工具来利用可重用的 UI 组件。实际的运行时交互很少，并且可以在运行时不使用 React 来完成。

我查看了react-static，这似乎正是我正在寻找的，但呈现的 html 页面仍然引用并加载 React 库。

根据我的最低需求，我可能会推出自己的东西，将每个页面创建为单独的 React SPA，然后使用 ReactDOMServer 将每个页面呈现为静态 HTML 文件。我正在寻找是否有更简单/更好的选择。

【问题讨论】：

标签： reactjs jekyll gatsby static-site

【解决方案1】：

您可以使用 pupeteer 获取任何网页的渲染 html，包括 SPA。或者使用 rendertron，它在下面使用 pupeteer。另一个是 react-snap，它将在构建时抓取您的网络并为每个页面创建 html。

【讨论】：

react-snap 看起来和我要找的完全一样。谢谢！

【解决方案2】：

有了盖茨比，你当然可以。 Gatsby 有一个html.js 作为所有生成页面的模板。您可以简单地从该 html 中删除 Gatsby 的 javascript。

/* Generated html */
...
<body>
  <div id="___gatsby">...</div>
  <script src="/common.js"></script> <-- remove this
</body>

首先将默认的html复制到你的src：

cp .cache/default-html.js src/html.js

然后，编辑这一行：

/* src/html.js */

    <body {...this.props.bodyAttributes}>
      {this.props.preBodyComponents}
      <div
        key={`body`}
        id="___gatsby"
        dangerouslySetInnerHTML={{ __html: this.props.body }}
      />

-     {this.props.postBodyComponents}
+     {process.env.NODE_ENV !== 'production' && this.props.postBodyComponents}

    </body>

这确保您仍然可以在开发中使用 gatsby 的热重载，但生成的 html 不会包含 React 和 webpack 生成的脚本。

更细致的方法是循环postBodyComponents & 只删除链接到common.js 的脚本标记，但在大多数情况下我认为它会很好。

这绝对违背了 Gatsby 的目的，它有自己的约定和复杂的过程，只是为了生成一个渐进式 Web 应用程序。对于您的情况，如果您还不熟悉 Gatsby，那么推出自己的 SSR 可能会更简单。我的回答只是说明 Gatsby 是否可行。

【讨论】：

谢谢！感谢关于这违背了盖茨比的主要目的的说明。