Egg + Vue 渲染模式

目前 egg-view-vue-ssr 支持 服务端渲染模式前端渲染模式 两种渲染模式

Egg + Vue 服务端 Node 渲染模式

这里服务端渲染指的是编写的 Vue 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器。MVVM 服务端渲染相比前端渲染,支持SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。 同时 MVVM 数据驱动方式有着更快的开发效率。总体来说,MVVM 框架的服务端渲染技术比较适合有一定交互性,且对SEO,首屏速度有要求的业务应用。当然, 如果想用于不属于该类型的项目(比如各种后台管理系统)也是可以的, 就当纯粹的玩一玩 Vue SSR 开发。

调用 egg-view-vue-ssrrender 方法实现服务端渲染

  • controller 调用 render 方法
// controller/home.js
module.exports = app => {
  return class HomeController extends app.Controller {
    async index() {
      const { ctx } = this;
      await ctx.render('home/home.js', Model.getPage(1, 10));
    }
  };
};
  • home/home.js 是由 Webpack(targe:node) 把 Vue 变成 Node 服务端运行的运行文件, 默认在 ${app_root}/app/view 目录下。

  • Model.getPage(1, 10) 表示在 Node 服务端获取到的业务数据,传给 Vue 组件在 Node 端进行模板编译为 HTML

  • Node 编译 HTML之后会根据 config/manifest.json 文件把 css, js 资源依赖注入到 HTML

  • 当服务队渲染失败时, egg-view-vue-ssr 默认开启进行客户端渲染模式。当线上流量过大时, 可以根据一定策略一部分用户服务端渲染, 一部分用户前端渲染, 减少服务端压力。

  • 本地开发默认禁用缓存, 线上运行模式默认开启缓存。

  • 如果是 SPA SSR 应用, 一般是在 Vue 里面提供组件的 fetch 方法由 Node 进行 fetch 数据调用, 然后把数据放入 store, 而不是在 Node 端进行获取, 具体见egg-vue-webpack-boilerplate 功能实现

export default function render(options) {
  if (options.store && options.router) {
    return context => {
      options.router.push(context.state.url);
      const matchedComponents = options.router.getMatchedComponents();
      if (!matchedComponents) {
        return Promise.reject({ code: '404' });
      }
      return Promise.all(
        matchedComponents.map(component => {
          if (component.preFetch) {
            return component.preFetch(options.store);
          }
          return null;
        })
      ).then(() => {
        context.state = Object.assign(options.store.state, context.state);
        return new Vue(options);
      });
    };
  }
  return context => {
    const VueApp = Vue.extend(options);
    const app = new VueApp({ data: context.state });
    return new Promise(resolve => {
      resolve(app);
    });
  };
}

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

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

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

  • controller 调用 renderClient 方法
const Model = require('../../mocks/article/list');

module.exports = app => {
  return class HomeController extends app.Controller {
    async client() {
      const { ctx } = this;
      await ctx.renderClient('home/home.js', Model.getPage(1, 10));
    }
  };
};
  • 使用 renderClient 进行渲染时, 需要存在 ${app_root}/app/view/layout.html layout文件, 只是一个简单的 HTML 骨架,具体内容由前端进行渲染。 同时支持对 layout 进行模板 Vue 数据绑定。
<!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>

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
插件使用 插件使用
插件流程https://easy-team.gitee.io/egg-vue/build插件介绍egg-webpack 用于在 egg 项目中启动 Webpack 编译服务,具体流程请见 构建流程 。 该插件只在本地启用。 该插件除了深度结合 easywebpack 体系使用, 也可...
2019-12-23 sky
Next 
SEO实现 SEO实现
Egg + Vue SSR SEO 实现MVVM 服务端渲染相比前端渲染,支持SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。在 Egg + Vue 的方案里面, HTML head 里面 meta 信息也作为 Vue 服务端渲染的一部分, 和普通的数据绑定没有什么差别。在实现上面, 考虑到页面有统一的 HTML, header, footer, body 骨架, 可以结合 Vue 的 slot 封装成一个统一的 layout 组件。一. layout...
2019-12-23 sky