logo标签列表

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

reactjswebpackwebpack-html-loader
14
有没有办法在HTML入口点直接预生成（单个路由）React应用程序的HTML结构？
然后页面将能够在加载任何JS之前显示基于React初始状态的HTML。
我实际上正在使用webpack-html-loader，但是任何其他加载器或插件都可以；）
PS：static-site-generator-webpack-plugin可能有帮助吗？
PS：我没有使用React Router。
你尝试过服务器端渲染吗？ - Bezzi
@Bezzi 你能详细一些吗？比如分享一个webpack.config :D 我需要在构建时生成静态HTML。 - Yves M.
只有当您的整个页面是静态的时，才能这样做。没有与 API 的通信？ - Fyre
4个回答
10
如果你想使用 static-site-generator-webpack-plugin，你需要先使用 webpack 构建一个 bundle，名为 bundle.js，其中包含一个导出渲染函数，并接收以下参数。
  • locals 是一个对象，包含各种页面元数据，例如 title，它们将成为组件参数（传统上被认为是模板变量）。
  • callback 是一个 Node.js 风格的回调函数 (err, result)，你需要用渲染后的 HTML 作为 result 的值来调用它。
例如：
// 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()呈现它们。
然后你需要在StaticSiteGeneratorPlugin的实例化中指定编译后的bundle.js文件作为bundle，还需要在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)
  ]
}
在webpack.config.js中为locals指定的键将出现在每次调用render(locals, callback)时的locals参数中。它们将与插件提供的path，assets和webpackStats键合并。

如果您想在呈现后将JavaScript代码加载到您的页面中，您可以将一个额外的page.js条目编译到webpack配置中，该条目以典型方式调用ReactDOM.render()，然后在render(locals, callback)函数中通过script标签加载该捆绑包。确保page.js将组件挂载到DOM中与entry.js呈现时相同的位置（您可能会在父元素上设置一个id属性）。您还需要确保两个环境中的任何位置（即路由路径）相关变量对齐。

请查看Gatsby的源代码，该源代码也使用此插件。您还可以查看Phenomic的源代码，了解另一种方法。

2

您应该尝试服务器端渲染，它可以让React在后端渲染应用程序的第一个视图并提供静态HTML。 这个样板已经设置了服务器渲染，并且您可以在这里了解更多相关信息。

当然可以，但我需要以完全静态的方式（不使用express）进行操作。初始HTML渲染应该在构建时（运行webpack时）完成。有任何示例可以分享吗？ - Yves M.
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接