vue 服务端渲染之ssr

传统web开发

网页内容在服务器渲染完成一次性传输到浏览器，这种方式查看源码，浏览器拿到的是全部的dom结构

单页应用spa

单页应用优秀的用户体验，使其逐渐成为主流，页面内容有js渲染出来，这种方式称为客户端渲染。打开网页源码，浏览器拿到的只有宿主元素#app,并没有内容。

存在两个问题：

• SEO不友好

• 首屏加载时间相对较长

  

服务端渲染 Server Side Render

ssr解决方案，后端渲染出完整的首屏dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染(ssr)

ssr是折中方案，利用vue语法编写方案，还能在服务端渲染html内容

使用Vue SSR

• 新建vue-cli3工程

vue create ssr

• 安装依赖

npm install vue-server-renderer koa -S这里我用的koa服务器

• 启动脚本

创建一个koa服务器，将 vue ssr 集成进来 ./server/simple-ssr.js

const Koa = require('koa');
const Router = require('koa-router')
const Vue = require("vue");
//拿出render的工厂函数
const {createRenderer} = require('vue-server-renderer');

const app = new Koa();
const router = new Router();
//创建render
const renderer = createRenderer();

app.use(router.routes())

const vm = new Vue({
    data:{
        name:'hello world'
    },
    template:`<div><h1>{{name}}</h1></div>`
});

router.get('/',async ctx => {
    try{
    	//将 Vue 实例渲染为 HTML
        const html = await renderer.renderToString(vm);
        ctx.body = html;
    }catch(error){
        ctx.body = "Internal Server Error";
    }
});

app.listen(3001,() => {
    console.log("启动成功");
})

复制代码

• 启动执行 node ./server/simple-ssr.js

路由

路由支持仍然使用vue-router

• 配置 ./router/index.js

import  Vue from "vue";
import Router from "vue-router";
import Index from "../views/index";
import Detail from "../views/detail"

Vue.use(Router);

// 导出工厂函数，他可以返回新的Router实例
// 每个请求一个单独实例避免状态相互污染
export function createRouter(){
  return new Router({
    mode:'history',
    routes:[
      {path:"/",component:Index},
      {path:"/detail",component:Detail}
    ]
  })
}
复制代码

整合vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
//导出工厂函数
export function createStore(){
  return new Vuex.Store({
    state:{
      count:108
    },
    mutations:{
      add(state){
        state.count += 1;
      }
    },
    actions:{
      add({commit}){
        commit('add')
      }
    }
  })
}

复制代码

构建

对于客户端应用程序和服务器应用程序，我们都要使用webpack打包，服务器需要[服务器bundle] 然后用于服务器渲染（ssr)，而[客户端bundle]会发送给浏览器，用于混合静态标记。

代码结构

src
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口，用于静态内容“激活”
└── entry-server.js # 服务端入口，用于首屏内容渲染
复制代码

vue实例创建

./main.js

import Vue from "vue";
import App from "./App.vue";
import {createRouter} from "./router";
import {createStore} from "./store";

// context是服务器传递给vue实例的参数对象
export function createApp(context){
  // 1.获取router实例
  const router = createRouter();
  // 2.获取store实例
  const store = createStore();
  // 3.创建vue实例
  const app = new Vue({
    router,
    store,
    context,
    render: h => h(App)
  });
  return {app,router,store};
}
复制代码

服务端入口

./entry-server.js

// 给服务器提供一个方法，可以根据接收url设置路由地址，然后返回创建Vue实例
// 在服务器执行
import {createApp} from "./main";

export default context => {
    return new Promise((resolve,reject) => {
        // 获取vue/router实例
        const {app,router,store} = createApp(context);
        // 跳转至首屏
        router.push(context.url);
        // onReady完成时，异步的任务都会结束
        router.onReady(() => {
        	resolve(app);
        },reject);
    });
}

复制代码

客户端入口

./entry-client.js

// 挂载创建vue实例: 将来在浏览器执行
import {createApp} from "./main";

// 创建vue实例
const {app,router,store} = createApp();

// 路由就绪，执行挂载（激活过程）
router.onReady(() => {
    app.$mount('#app');
}) 
复制代码

webpack配置

• 安装依赖

npm install webpack-node-externals lodash.merge -D

• 具体配置 vue.config.js

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
// 外置化，用于优化打包速度和体积
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
// 根据传入环境变量决定入口文件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";

module.exports = {
  css: {
    extract: false
  },
  outputDir: "./dist/" + target,
  configureWebpack: () => ({
    // 将 entry 指向应用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 对 bundle renderer 提供 source map 支持
    devtool: "source-map",
    // target设置为node使webpack以Node适用的方式处理动态导入，
    // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
    target: TARGET_NODE ? "node" : "web",
    // 是否模拟node全局变量
    node: TARGET_NODE ? undefined : false,
    output: {
      // 此处使用Node风格导出模块
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。
    externals: TARGET_NODE
      ? nodeExternals({
          // 不要外置化webpack需要处理的依赖模块。
          // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
          // 还应该将修改`global`（例如polyfill）的依赖模块列入白名单
          allowlist: [/\.css$/]
        })
      : undefined,
    optimization: {
      splitChunks: TARGET_NODE ? false : undefined
    },
    // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
    // 服务端默认文件名为 `vue-ssr-server-bundle.json`
    // 客户端默认文件名为 `vue-ssr-client-manifest.json`。
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        });
      });
  }
};

复制代码

脚本配置

• 安装依赖 npm i cross-env -D
• 定义创建脚本 package.json

"scripts": {
    "build:client": "vue-cli-service build",
    "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
    "build": "npm run build:server && npm run build:client",
  }
复制代码

• 执行打包npm run build

宿主文件

• 最后需要定义宿主文件，修改./public/index.html

注意 <!--vue-ssr-outlet--> 注释 -- 这里将是应用程序 HTML 标记注入的地方。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-study</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

复制代码

服务器启动文件

修改服务器启动文件，现在需要处理所有路由 ./server/ssr.js

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const Static = require('koa-static');

const app = new Koa();

const resolve = dir => {
    return path.resolve(__dirname,dir)
}

// 第 1 步：开放dist/client目录,关闭默认下载index页的选项，不然到不了后面的路由。
app.use(Static(resolve('../dist/client'),{index: false}))

// 第 2 步：获得一个createBundleRender
const {createBundleRenderer} = require("vue-server-renderer");

// 第 3 步: 导入服务端打包文件
const bundle = require(resolve("../dist/server/vue-ssr-server-bundle.json"));

// 第 4 步：创建渲染器
const template = fs.readFileSync(resolve("../public/index.html"),"utf-8");
const clientManifest = require(resolve("../dist/client/vue-ssr-client-manifest.json"));
const renderer = createBundleRenderer(bundle,{
    runInNewContext:false,  //https://ssr.vuejs.org/zh/api/#runinnewcontext
    template,   //宿主文件
    clientManifest  //客户端清单
});

//对于任何请求，app将调用该异步函数处理请求
app.use(async (ctx,next) => {
    console.log(ctx.url);
    // 设置url和title两个重要参数
    const context = {
        title:'ssr test',
        url:ctx.url
    }
    const html = await renderer.renderToString(context);
    ctx.body = html;
})

const port = 3001;
app.listen(port,function(){
    console.log(`server started at localhost:${port}`);
})
复制代码

数据预取

如果应用依赖于一些异步数据，那么在开始渲染前，需要先预取和解析好这些数据

• 异步获取数据 ./store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export function createStore(){
  return new Vuex.Store({
    state:{
      count:108
    },
    mutations:{
      add(state){
        state.count += 1;
      },
      init(state,count){
        state.count = count;
      }
    },
    actions:{
      // 加一个异步请求count的请求
      getCount({commit}){
       return new Promise(resolve => {
         setTimeout(() => {
           commit('init',Math.random() * 100);
           resolve();
         },1000)
       })
      },
      add({commit}){
        commit('add')
      }
    }
  })
}

复制代码

• 组件中的数据预取逻辑，index.vue

<template>
  <div class="about">
    index page
    {{$store.state.count}}
    <button @click="$store.dispatch('add')">add</button>
  </div>
</template>
<script>
 export default{
 //约定预取逻辑编写在预取狗子asyncData中
   asyncData({store,route}){
     return store.dispatch("getCount")
   }
 }
 </script>
复制代码

• 服务端数据预取， entery-server.js

// 给服务器提供一个方法，可以根据接收url设置路由地址，然后返回创建Vue实例
// 在服务器执行
import {createApp} from "./main";

export default context => {
    return new Promise((resolve,reject) => {
        // 获取vue/router实例
        const {app,router,store} = createApp(context);
        // 跳转至首屏
        router.push(context.url);
        // onReady完成时，异步的任务都会结束
        router.onReady(() => {
        	//在这里写服务端数据预取
            // 获取匹配的路由组件到数组
            const matchedComponents = router.getMatchedComponents();

            // 若无匹配则抛出异常
            if(!matchedComponents.length){
                return reject({code:404});
            }

            // 对所有匹配的路由组件调用可能存在的`asyncData()`
            Promise.all(
                matchedComponents.map(Component => {
                    if(Component.asyncData){
                        return Component.asyncData({
                            store,
                            route:router.currentRoute
                        })
                    }
                })
            ).then(() => {
                // 所有预取钩子resolve后，
                // store已经填充渲染应用所需状态
                // 将状态附加到上下文，且`template`选项用于renderer时，
                // 状态将自动序列化为`window.__INITIAL__STATE__`,并注入HTML
                context.state = store.state;
                resolve(app);
            }).catch(reject)
        },reject)
    })
}

复制代码

• 客户端在挂载到应用程序之前，store就应该获取到状态，entry-client.js

// 当使用template时，context.state将作为window.__INITIAL_STATE__ 状态自动嵌入到最终的HTML
// 在客户挂载到应用程序之前，store就应该获取到状态：
if(window.__INITIAL_STATE__){
    store.replaceState(window.__INITIAL_STATE__);
}
复制代码

• asyncData默认只有在首屏渲染的时候执行一次，如果不是在首屏使用还是在其他页面使用就得不到数据，所以确保客户端每个组件如果有asyncData，要执行之。在main.js加入混入

Vue.mixin({
  beforeMount(){
    const {asyncData} = this.$options;
    if(asyncData){
      // 将获取数据操作分配给promise
      // 以便在组件中，我们可以在数据准备就绪后
      // 通过运行`this.dataPromise.then(...)`来执行其他任务
      this.dataPromise = asyncData({
        store:this.$store,
        route:this.$route
      })
    }
  }
})
复制代码