Question

有没有办法直接在HTML入口点预生成（单个路由）React应用程序的HTML结构？

然后页面将能够在加载任何JS之前显示HTML（基于React初始状态）。

我实际上正在使用webpack-html-loader，但欢迎任何其他加载器或插件;）

PS：static-site-generator-webpack-plugin可以帮忙吗？

PS：我没有使用React Router

Answer 1

如果您想使用static-site-generator-webpack-plugin，首先需要使用webpack bundle.js构建一个包，该包导出一个带有以下参数的呈现函数。

locals具有各种页面元数据的对象，例如title进入组件参数（传统上被认为是模板变量）。
callback一个nodejs样式(err, result)回调，您将使用呈现的html作为result

e.g。

// entry.js, compiled to bundle.js by webpack

module.exports = function render(locals, callback) {
  callback(null, 
      '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};

在此函数中，您将实例化组件（如果需要，可以通过React Router）并使用ReactDOMServer.renderToString()进行渲染。

然后，您将在bundle.js的实例化中将已编译的bundle指定为StaticSiteGeneratorPlugin，并在paths和locals对象中指定具体路由包含上述元数据值。

var paths, locals; // compute paths from metadata files or frontmatter

module.exports = {
  entry: {
    bundle: './entry.js' // build bundle.js from entry.js source
  },
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin('bundle', paths, locals)
  ]
}

您在locals中为webpack.config.js指定的密钥将出现在每次locals调用的render(locals, callback)参数中。它们将与插件提供的path，assets和webpackStats密钥合并。

如果你想在渲染后将javascript代码加载到你的页面中，你可以编译一个额外的page.js条目到你的webpack配置，以典型的方式调用ReactDOM.render()，然后将该包加载到{{您script（上方）render(locals, callback)函数中发出的1}}标记。确保bundle.js将组件安装到DOM中与page.js呈现时相同的位置（您可能会在父元素上设置entry.js属性）。您还需要确保任何位置（即路径路径）因变量在两种环境中都一致。

查看同时使用此插件的Gatsby的源代码。您还可以查看Phenomic的源代码，了解替代方法。

Answer 2

您应该尝试服务器端渲染，它会让您在后端呈现应用的第一个视图并提供静态HTML。 This boilerplate已经附带服务器渲染设置，您可以了解有关它的更多信息here

Answer 3

Jekyll非常棒的静态网站生成器，可以使用自定义ruby插件进行扩展。您需要启用 WebPack 才能进行 Jekyll 调用。见Plugging Webpack to Jekyll Powered Pages

Answer 4

这里有一个工作示例https://github.com/aganglada/preact-minimal/blob/master/config/webpack.config.js，如果你愿意，你可以分叉并看一下这是如何工作的。

希望有所帮助：）

使用Webpack进行初始静态React HTML渲染

4 个答案: