理解vuessr原理并自己搭建简单的ssr框架-创新互联

前言

大多数Vue项目要支持SSR应该是为了SEO考虑，毕竟对于WEB应用来说，搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了，但是如果是把一个SPA应用改造成SSR应用，成本还是有些高的，这工作量无异于重构前端。另外对前端的技术要求也是挺高的，需要对Vue比较熟悉，还要有Node.js 和 webpack 的应用经验。

引入

Vue是一个构建客户端应用的框架，即vue组件是在浏览器中进行渲染的。所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务端渲染的优点

• 更好的SEO，搜索引擎爬虫可以抓取渲染好的页面
• 更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好

服务端渲染的缺点

• 首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。
• 由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境下，还要做好服务器负载和缓存策略

原理解析

先附上demo地址：https://github.com/wmui/vue-ssr-demo

第一步：编写entry-client.js和entry-server.js

entry-client.js只在浏览器环境下执行，所以需要显示调用$mount方法，挂载DOM节点

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

function createApp() {
 const store = createStore();
 const app = new Vue({
   store,
   render: h => h(App)
 });
 return {app, store}
}

const { app, store } = createApp();

// 使用window.__INITIAL_STATE__中的数据替换整个state中的数据，这样服务端渲染结束后，客户端也可以自由操作state中的数据
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__);
}

app.$mount('#app');