Vue服务端渲染实践之Web应用首屏耗时最优化方案

字符串，能立即渲染

DOM

，最高效的首屏耗时。此外，由于服务端直接生成了对应的

HTML

字符串，对

SEO

也非常友好；
服务端渲染的本质是：生成应用程序的“快照”。将

Vue

及对应库运行在服务端，此时，

Web Server Frame

实际上是作为代理服务器去访问接口服务器来预拉取数据，从而将拉取到的数据作为

Vue

组件的初始状态。
服务端渲染的原理是：虚拟

DOM

。在

Web Server Frame

作为代理服务器去访问接口服务器来预拉取数据后，这是服务端初始化组件需要用到的数据，此后，组件的

beforeCreate

和

created

生命周期会在服务端调用，初始化对应的组件后，

Vue

启用虚拟

DOM

形成初始化的

HTML

字符串。之后，交由客户端托管。实现前后端同构应用。

如何在基于Koa的Web Server Frame上配置服务端渲染？

基本用法

需要用到

Vue

服务端渲染对应库

vue-server-renderer

，通过

npm

安装：

npm install vue vue-server-renderer --save

最简单的，首先渲染一个

Vue

实例：

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue');
const app = new Vue({
 template: `<div>Hello World</div>`
});
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer();
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
 if (err) {
   throw err;
 }
 console.log(html);
 // => <div data-server-rendered="true">Hello World</div>
});

与服务器集成：

module.exports = async function(ctx) {
  ctx.status = 200;
  let html = '';
  try {
    // ...
    html = await renderer.renderToString(app, ctx);
  } catch (err) {
    ctx.logger('Vue SSR Render error', JSON.stringify(err));
    html = await ctx.getErrorPage(err); // 渲染出错的页面
  }
  ctx.body = html;
}

使用页面模板：