浏览器渲染模式指的是Node 端只会根据包含html, head, body节点信息的 layout 文件输出骨架内容, 页面的实际内容交给浏览器去渲染。

调用 egg-view-vue-ssrrenderClient 方法实现客户端浏览器渲染

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

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

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

//${root}/webpack.config.js
module.exports = {
  target: 'web'
  ...
}

controller 调用 renderClient 方法

const Model = require('../../mocks/article/list');

module.exports = app => {
  return class HomeController extends app.Controller {
    async client() {
      const { ctx } = this;
      const locals = { 
        seo: { keyword: 'Egg,Vue,SSR', description: 'Egg Vue SSR Development'}, 
        data: Model.getPage(1, 10) 
      };
      await ctx.renderClient('home/home.js', locals);
    }
  };
};

layout 配置文件

使用 renderClient 进行渲染时, 需要存在 ${app_root}/app/view/layout.html layout文件, 只是一个简单的 HTML 骨架,具体内容由前端进行渲染。 同时支持对 layout 进行模板 Vue 数据绑定。 在进行前端渲染时, Egg Node 会把 CSS/JS 依赖注入 layout 中。默认 renderClient``** 会对 layout HTML 模板进行 Vue 编译; 如果不想对 layout HTML 进行 Vue 编译,可以在第三个参数中传入 { viewEngine: null }**

  • layout html 文件
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Egg + Vue + Webpack</title>
  <meta name="keywords" content="{{seo.keywords}}">
  <meta name="description" content="{{seo.description}}">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
  <div id="app"></div>
</body>
</html>
  • 自定义配置 layout 文件路径,这里的配置是一个全局的 layout 的配置
//${root}/config/config.default.js
exports.vuessr = {
    layout: path.join(app.baseDir, 'app/web/view/layout.html'),
    renderOptions: {
      basedir: path.join(app.baseDir, 'app/view')
    }
 };
  • 个性化配置 layout 文件


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

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

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
TypeScript TypeScript
TypeScript 构建支持Node 启用 typescript 编译 egg-bin dev -r egg-ts-helper/register 实现开发 tsc -p tsconfig.json 编译package.json 运行脚本
2019-12-23 sky
Next 
Asset 渲染模式 Asset 渲染模式
React + Nunjucks Asset前端渲染https://easy-team.gitee.io/egg-react/asset ${root}/app/controller/render.tsimport { Controller, Context } from '@ea...
2019-12-23 sky