什么是SSR?

SSR是Server Side Rendering的缩写，它可以将组件渲染成为HTML字符串，发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序，它的出现是为了解决SPA问题。

为什么要用SSR？

利于SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间，页面渲染的更快。

使用Vue的服务端渲染

服务端渲染的Vue.js的应用程序，使Vue既可以在服务端运行，也可以在客户端（浏览器）运行，可以称为“同构”或者“通用”。

配置构建

流程图大致意思是：将 Source（源码）通过 webpack 打包出两个 bundle，其中 Server Bundle 是给服务端用的，服务端通过渲染器 bundleRenderer 将 bundle 生成 html 给浏览器用；另一个 Client Bundle 是给浏览器用的，别忘了服务端只是生成前期首屏页面所需的 html ，后期的交互和数据处理还是需要能支持浏览器脚本的 Client Bundle 来完成。

初始化数据

服务端渲染和浏览器渲染是有区别的，在服务端只有beforeCreate和created两个生命周期，因为SSR只会生成HTML字符串，不会渲染DOM结构，也就没有beforeMount和mounted,也就不会进行更新，所以也不会有beforeUpdate和updated。

实现

import Vue from 'vue';
import Vuex from 'vuex';
import { getDemoData } from '../api/modules/demo.api';

Vue.use(Vuex);
const createStore = () => {
  return new Vuex.Store({
    modules: {},
    state: {
      demoData: null
    },
    mutations: {
      UPDATE_DEMO(state, payload) {
        state.demoData = payload.data;
      }
    },
    actions: {
      async getAsyncData({ commit }) {
        const data = await getDemoData();
        commit('UPDATE_DEMO', { data });
      }
    }
  });
};
export default createStore;
复制代码

router

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 路由需要和服务端的对应上，否则前端的路由不会触发
export default function createRouter() {
  return new Router({
    mode: 'history',
    routes: [{ path: '/', component: () => import('../../views/demoPage') }]
  });
}
复制代码