Question

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

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

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

在我的最低需求下，我可能可以自己动手制作每个页面作为单独的React SPA，然后使用ReactDOMServer将每个页面呈现为静态HTML文件。我正在寻找是否有更简单/更好的选择。

Answer 1

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

Answer 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的脚本标签，但对于大多数情况，我认为这会很好。

这绝对违背了盖茨比的宗旨，盖茨比有自己的约定和复杂的流程，因此可以生成一个渐进式Web应用程序。就您而言，如果您还不熟悉Gatsby，则推出自己的SSR可能会更简单。我的答案仅是说明盖茨比是否可行。

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

2 个答案: