直接将 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)?

static-site

jekyll

reactjs

gatsby