不错鼓励并赞赏标签： HTML CSS Javascript 评论 / 2020-03-02

可能大家在看到这个标题的时候，会觉得，只不过又是一篇烂大街的SSR从零入门的教程而已。别急，往下看，相信你或多或少会有一些不一样的收获呢
在落地一种技术的时候，我们首先要想一想：
是否一定需要引入这种技术呢？他能解决什么问题，或者能带来什么收益？
为什么要采用这种技术选型而不是其他的？
引入了这种技术后，会带来什么问题吗（比如额外的开发成本等）？
上面三个问题思考清楚之后，才能真正地去落地。而有赞教育接入服务端渲染，正是为了优化H5页面的首屏内容到达时间，带来更好的用户体验（顺便利于SEO）。
说了这么多，以下开始正文。

一、后端模版引擎时代

在较早时期，前后端的配合模式为：后端负责服务层、业务逻辑层和模版渲染层（表现层）；前端只是实现页面的交互逻辑以及发送AJAX。比较典型的例子就是JSP或FreeMarker模板引擎负责渲染出html字符串模版，字符串模版里的js静态资源才是真正前端负责的东西。
而这种形式，就是天然的服务端渲染模式：用户请求页面 -> 请求发送到应用服务器 -> 后端根据用户和请求信息获取底层服务 -> 根据服务返回的数据进行组装，同时JSP或FreeMarker模版引擎根据组装的数据渲染为html字符串 -> 应用服务器讲html字符串返回给浏览器 -> 浏览器解析html字符串渲染UI及加载静态资源 -> js静态资源加载完毕界面可交互。
那么既然后端模版引擎时代带来的效果就是我们想要的，那为啥还有以后让前端发展服务端渲染呢？因为很明显，这种模式从开发角度来讲还有挺多的问题，比如：
后端需要写表现层的逻辑，但其实后端更应该注重服务层（和部分业务逻辑层）。当然，其实也可以让前端写JSP或FreeMarker，但从体验上来说，肯定不如写JS来的爽。
本地开发的时候，需要启动后端环境，比如Tomcat，影响开发效率，对前端也不友好。
所赋予前端的能力太少，使得前端需要的一些功能只能由后端提供，比如路由控制。
前后端耦合

二、SPA时代

后来，诞生了SPA（Single Page Application），解决了上面说的部分问题：
后端不需要关心表现层的逻辑，只需要注重服务层和业务逻辑层就可以了，暴露出相应的接口供前端调用。这种模式也同时实现了前后端解耦。
本地开发的时候，前端只需要启动一个本地服务，如：dev-server就可以开始开发了。
赋予了前端更多的能力，比如前端的路由控制和鉴权，比如通过SPA + 路由懒加载的模式可以带来更好的用户体验。
但同时，也带来了一些问题：
页面的DOM完全由js来渲染，使得大部分搜索引擎无法爬取渲染后真实的DOM，不利于SEO。
页面的首屏内容到达时间强依赖于js静态资源的加载（因为DOM的渲染由js来执行），使得在网络越差的情况下，白屏时间大幅上升。

三、服务端渲染

正因为SPA带来的一些问题（尤其是首屏白屏的问题），接入服务端渲染显得尤为必要。 // 终于讲到服务端渲染这个重点了
而正是Node的发展和基于Virtual DOM的前端框架的出现，使得用js实现服务端渲染成为可能。因此在SPA的优势基础上，我们顺便解决了因为SPA引入的问题：
服务端渲染的首屏直出，使得输出到浏览器的就是完备的html字符串模板，浏览器可以直接解析该字符串模版，因此首屏的内容不再依赖js的渲染。
正是因为服务端渲染输出到浏览器的是完备的html字符串，使得搜索引擎能抓取到真实的内容，利于SEO。
同时，通过基于Node和前端MVVM框架结合的服务端渲染，有着比后端模版引擎的服务端渲染更明显的优势：可以优雅降级为客户端渲染（这个后续会讲，先占个坑）。

3.1 实现

既然服务端渲染能带来这么多好处，那具体怎么实现呢？
从官网给出的原理图，我们可以清晰地看出：
Source为我们的源代码区，即工程代码
Universal Appliation Code和我们平时的客户端渲染的代码组织形式完全一致，只是需要注意这些代码在Node端执行过程触发的生命周期钩子不要涉及DOM和BOM对象即可
比客户端渲染多出来的app.js、Server entry 、Client entry的主要作用为：app.js分别给Server entry 、Client entry暴露出createApp()方法，使得每个请求进来会生成新的app实例。而Server entry和Client entry分别会被webpack打包成vue-ssr-server-bundle.json和vue-ssr-client-manifest.json（这两个json文件才是有用的，app.js、Server entry 、Client entry可以抽离，开发者不感知）
Node端会根据webpack打包好的vue-ssr-server-bundle.json，通过调用createBundleRenderer生成renderer实例，再通过调用renderer.renderToString生成完备的html字符串
Node端将render好的html字符串返回给Browser，同时Node端根据vue-ssr-client-manifest.json生成的js会和html字符串hydrate，完成客户端激活html，使得页面可交互

3.2 优化

按照Vue SSR官方文档建立起一个服务端渲染的工程后，是否就可以直接上线了呢？别急，我们先看看是否有什么可以优化的地方。

1.路由和代码分割 -- 一个大的SPA，主文件js往往很大，通过代码分割可以将主文件js拆分为一个个单独的路由组件js文件，可以很大程度上减小首屏的资源加载体积，其他路由组件可以预加载。

// router.js
const Index = () => import(/* webpackChunkName: "index" */ './pages/Index.vue');  
const Detail = () => import(/* webpackChunkName: "detail" */ './pages/Detail.vue');  
const routes = [  
    {
        path: '/',
        component: Index
    },
    { 
       path: '/detail', 
       component: Detail
    }
];
const router = new Router({  
    mode: 'history',
    routes
});
1234567891011121314151617

2.部分模块（不需要SSR的模块）客户端渲染 -- 因为服务端渲染是CPU密集型操作，非首屏的模块或者不重要的模块（比如底部的推荐列表）完全可以采用客户端渲染，只有首屏的核心模块采用服务端渲染。这样做的好处是明显的：1. 较大地节省CPU资源； 2. 减小了服务端渲染直出的html字符串长度，能够更快地响应给浏览器，减小白屏时间

// Index.vue
asyncData({ store }) {  
    return this.methods.dispatch(store); // 核心模块数据预取，服务端渲染
}
mounted() {  
    this.initOtherModules(); // 非核心模块，客户端渲染，在mounted生命周期钩子里触发
}
1234567

3.页面缓存/组件缓存 -- 页面缓存一般适用于状态无关的静态页面，命中缓存直接返回页面；组件缓存一般适用于纯静态组件，也可以一定程度上提升性能

// page-level caching
const microCache = LRU({  
    max: 100,
    maxAge: 1000 // 重要提示：条目在 1 秒后过期。
})
server.get('*', (req, res) => {  
    const hit = microCache.get(req.url)
    if (hit) { // 命中缓存，直接返回页面
      return res.end(hit)
   }
   // 服务端渲染逻辑
   ...
})
12345678910111213

// component-level caching
// server.js
const LRU = require('lru-cache')  
const renderer = createRenderer({  
    cache: LRU({
        max: 10000,
        maxAge: ...
    })
});

// component.js
export default {  
    name: 'item', // 必填选项
    props: ['item'],
    serverCacheKey: props => props.item.id,
    render (h) {
        return h('div', this.item.id)
    }
};
12345678910111213141516171819

4.页面静态化 -- 如果工程中大部分页面都是状态相关的，所以技术选型采用了服务端渲染，但有部分页面是状态无关的，这个时候用服务端渲染就有点浪费资源了。像这些状态无关的页面，完全可以通过Nginx Proxy Cache缓存到Nginx服务器，可以避免这些流量打到应用服务器集群，同时也能减少响应的时间。