代码之家 › 专栏 › 技术社区 › Samuel Neff

直接呈现对HTML的反应的静态站点生成器(在输出中没有反应)?

static-site gatsby jekyll reactjs

Samuel Neff · 技术社区 · 6 年前

罐头 Gatsby 或 Jekyll 或者其他任何静态站点生成器将React编写的站点呈现为纯静态HTML?我希望在S3/CloudFront或类似的平台上运行,并且在输出中几乎没有JS。

基本上,我希望创建一个静态网站,但希望使用React作为开发工具,利用可重用的UI组件。实际的运行时交互是最小的,并且可以在运行时不做任何反应。

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

有了最低限度的需求,我可能可以把自己的东西滚动起来,将每个页面创建为一个单独的React SPA,然后使用 ReactDOMServer 将每个文件呈现为静态HTML文件。我想看看是否有更简单/更好的选择。

0 回复 | 直到 6 年前

jorbuedo 6 年前

您可以使用pupeter来获取任何网页(包括SPA)的呈现html。或者使用rendertron,它在下面使用pupteer。另一个是react snap,它将在构建时抓取web并为每个页面创建html。

Derek Nguyen 6 年前

和盖茨比在一起,你当然可以。盖茨比有一个 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 &仅删除链接到的脚本标记(amp;O) common.js ,但在大多数情况下我认为会好的。

这无疑违背了Gatsby的宗旨,Gatsby有自己的惯例和复杂的流程,因此它可以生成一个进步的web应用程序。就你的情况而言,如果你还不熟悉盖茨比,也许用你自己的SSR更简单。我的回答只是想表明是否有可能和盖茨比在一起。