使用 webpack 与 html-webpack-plugin 进行 react 服务器渲染并生成静态页面文件

实现 react 服务器渲染的通常思路是使用 node 服务器即时渲染组件并生成页面数据流返回给浏览器,最简单版本的 node 服务器渲染:https://github.com/codelegant/react-server-simple

但是这种实现方式有以下缺点:

  • 如果原来有 node 服务器还好,否则需要额外架设服务器
  • 对前端开发者并不是特别友好
  • 即时渲染组件,比较耗费资源

那有没有不需要架设 node 服务器,实现方式又很前端,并且可以预渲染并生成静态文件的方式呢?答案是:有的!只需要用到两个工具:webpack 与 html-webpack-plugin。

首先,我们知道,webpack 是工作在 node 环境下的,这意味着我们可以在其中调用ReactDOMServer,服务器渲染的功能实现了。其次,html-webpack-plugin 用于生成 html 文件,并且我们可以使用自己模板并插值,这样就允许我们将上一步生成的组件插入到模板中,并生成 html 文件,这样就实现了真静态。

GitHub 示例链接:https://github.com/codelegant/react-action。接下来一步步讲解。

新建一个名为 ItemList 的组件,注意模块的导入导出写法:

然后添加静态数据与服务器渲染代码:

添加 html 模板文件:

最后重点来了,webpack 的配置,详细代码见:https://github.com/codelegant/react-action/blob/master/webpack.server.config.js

最后在命令行中运行npm run server运行编译,会生成两个文件:dist/bundle.min.jspublic/server-render.html。在浏览器运行并查看页面源码,可以看到组件已经被编译进页面文件中。

static-source
静态页面文件源码

注意:node 环境下渲染组件会调用constructor()  componentWillMount() render()三个方法,而浏览器会额外调用componentDidMount(),所以官方推荐定时器,ajax 请求等操作放置于componentDidMount()中,因为在 node 环境下,是无法使用浏览器相关的函数与方法的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注