Egg + React 客户端浏览器渲染模式

调用 egg-view-react-ssr 的 renderClient 方法实现客户端浏览器渲染

renderClient 表示 Node 服务端端只渲染一个包含 HTML，header，body 的一个简单 HTML 页面骨架， 具体页面内容由 React 在浏览器进行渲染，你可以在浏览器右键源代码看看HTML代码就明白了

在使用上面, 客户端浏览器渲染模式只需要把 render 改成 renderClient。 正常情况下, 能进行 render 运行的, renderClient 方式也能正常运行。

Webpack 配置优化，提高构建速度

在 ${root}/webpack.config.js 文件添加 target: ‘web’ 配置选项，这样只会构建浏览器运行的 JSBundle 文件，无需构建 Node 运行的 JSBundle 文件(SSR 模式会构建两份结果，一份给 Node 运行，一份给浏览器运行)。

  1. //${root}/webpack.config.js
  2. module.exports = {
  3.   target: 'web'
  4.   ...
  5. }

controller 调用 renderClient 方法

  • controller 调用 renderClient 方法
  1. const Model = require('../../mocks/article/list');
  3. module.exports = app => {
  4.   return class HomeController extends app.Controller {
  5.     async client() {
  6.       const { ctx } = this;
  7.       await ctx.renderClient('home/home.js', Model.getPage(1, 10));
  8.     }
  9.   };
  10. };
  • 前端渲染配置 HTML layout 模板文件，这里的配置是一个全局的 layout 的配置
  1. //${root}/config/config.default.js
  2. exports.reactssr = {
  3.   layout: path.join(app.baseDir, 'app/web/view/layout.html')
  4. };
  1. <!--${root}/app/web/view/layout.html--> 
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <title>Egg + React</title>
  6.   <meta name="keywords">
  7.   <meta name="description">
  8.   <meta http-equiv="content-type" content="text/html;charset=utf-8">
  9.   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  10.   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  11. </head>
  12. <body>
  13.   <div id="app"></div>
  14. </body>
  15. </html>
  • 个性化配置 layout 文件


使用 renderClient 的第三个扩展参数配置 layout, 优先级高于全局 layout 配置

  1. module.exports = app => {
  2.   return class HomeController extends app.Controller {
  3.     async client() {
  4.       const { ctx } = this;
  5.       await ctx.renderClient('home/home.js', {}, 
  6.         { layout: path.join(app.baseDir, 'app/web/page/home/layout.html')});
  7.     }
  8.   };
  9. };

具体例子请见：egg-react-webpack-boilerplate 运行后菜单 SPA-CSR 例子。