Vue的SSR(服务端渲染)

3,396 阅读2分钟

什么是SSR?

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

为什么要用SSR?

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

使用Vue的服务端渲染

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

配置构建

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

初始化数据

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

SSR渲染路由为什么只能用history模式?

  • 因为hash模式不会将数据提交给服务器,所以必须使用hisory模式

实现

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') }]
  });
}

总结

  • 在组件中添加asyncData静态方法
  • 通过Vue-router匹配视图
  • 调用asyncData进行数据预取
  • 返回包含数据的HTML