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

随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。

关于Vue服务端渲染的原理、搭建，官方文档已经讲的比较详细了，因此，本文不是抄袭文档，而是文档的补充。特别是对于如何与现有项目进行很好的结合，还是需要费很大功夫的。本文主要对我所在的项目中进行Vue服务端渲染的改造过程进行阐述，加上一些个人的理解，作为分享与学习。

概述

本文主要分以下几个方面：

•  什么是服务端渲染？服务端渲染的原理是什么？
•  如何在基于Koa的Web Server Frame上配置服务端渲染？ 
  • 基本用法
  •  Webpack配置
  •  开发环境搭建
    
    • 渲染中间件配置

•  如何对现有项目进行改造？
  •   基本目录改造；
  •   在服务端用vue-router分割代码；
    •   在服务端预拉取数据；
    •   客户端托管全局状态；
    •   常见问题的解决方案；

什么是服务端渲染？服务端渲染的原理是什么？

Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

上面这段话是源自Vue服务端渲染文档的解释，用通俗的话来说，大概可以这么理解：

•  服务端渲染的目的是：性能优势。 在服务端生成对应的HTML字符串，客户端接收到对应的HTML字符串，能立即渲染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;  
} 

使用页面模板：

当你在渲染Vue应用程序时，renderer只从应用程序生成HTML标记。在这个示例中，我们必须用一个额外的HTML页面包裹容器，来包裹生成的HTML标记。

（编辑：ASP站长网）