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

Question

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

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

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

根据我的最低需求，我可能会自己动手将每个页面创建为单独的 React SPA，然后使用 ReactDOMServer 将每个页面呈现为静态 HTML 文件。我正在查看是否有 simpler/better 个选项。

Answer 1

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

Answer 2

有了 Gatsby，当然可以。 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 的热重载，但生成的 htmls 将不包括 React 和 webpack 生成的脚本。

一种更细致的方法是遍历 postBodyComponents 并只删除 link 到 common.js 的脚本标记，但对于大多数情况，我认为它会很好。

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

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

Static site generator that renders React to HTML directly (no React in output)?

reactjs

jekyll

gatsby

static-site