服务端渲染SSR

资源

  1. vue ssr
  2. nuxt.js

知识点

理解ssr

传统web开发

传统web开发，网⻚内容在服务端渲染完成，一次性传输到浏览器。
image.png
测试代码，server\01-express.js

打开⻚面查看源码，浏览器拿到的是全部的dom结构
image.png

单⻚应用 Single Page App

单⻚应用优秀的用户体验，使其逐渐成为主流，⻚面内容由JS渲染出来，这种方式称为客户端渲染。
image.png

测试：npm run serve
打开⻚面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容。
image.png

单⻚应用缺点：

  1. seo
  2. 首屏加载速度

优点：

  1. 渲染计算放到客户端
  2. 省流量

服务端渲染 Server Side Render

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

image.png

Vue SSR实战

新建工程

vue-cli创建工程即可

  1. vue create ssr

演示项目使用vue-cli 4.x创建

安装依赖

  1. npm install vue-server-renderer@2.6.10 -S

要确保vue、vue-server-renderer版本一致

启动脚本

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

  1. const express = require("express");
  2. const app = express();
  5. // 导入Vue构造函数
  6. const Vue = require("vue");
  8. // createRenderer用于获取渲染器
  9. const { createRenderer } = require("vue-server-renderer");
  12. // 获取渲染器
  13. const renderer = createRenderer();
  16. app.get("/", async (req, res) => {
  17.   // 创建一个待渲染vue实例
  18.   const vm = new Vue({
  19.     data: { name: "村⻓真棒" },
  20.     template: `
  21. <div >
  22. <h1>{{name}}</h1>
  23. </div>
  24. `
  25.   });
  28.   try {
  29.     // renderToString将vue实例渲染为html字符串，它返回一个Promise
  30.     const html = await renderer.renderToString(vm);
  31.     // 返回html给客户端
  32.     res.send(html);
  33.   } catch (error) {
  34.     // 渲染出错返回 500 错误
  35.     res.status(500).send("Internal Server Error");
  36.   }
  37. });
  40. app.listen(3000);

路由

路由支持仍然使用vue-router

安装

若未引入vue-router则需要安装

  1. npm i vue-router -s

创建路由实例

每次请求的url委托给vue-router处理，03-simple-ssr.js

  1. // 引入vue-router
  2. const Router = require('vue-router')
  3. Vue.use(Router)
  6. // path修改为通配符
  7. app.get('*', async function (req, res) {
  8.   // 每次创建一个路由实例
  9.   const router = new Router({
  10.     routes: [
  11.       { path: "/", component: { template: '<div>index page</div>' } },
  12.       { path: "/detail", component: { template: '<div>detail page</div>' } }
  13.     ]
  14.   });
  17.   const vm = new Vue({
  18.     data: { msg: '村⻓真棒' },
  19.     // 添加router-view显示内容
  20.     template: `
  21. <div>
  22. <router-link to="/">index</router-link>
  23. <router-link to="/detail">detail</router-link>
  24. <router-view></router-view>
  25. </div>`,
  26.     router, // 挂载
  27.   })
  30.   try {
  31.     // 跳转至对应路由
  32.     router.push(req.url);
  33.     const html = await renderer.renderToString(vm)
  34.     res.send(html)
  35.   } catch (error) {
  36.     res.status(500).send('渲染出错')
  37.   }
  38. })

同构开发SSR应用

对于同构开发，我们依然使用webpack打包，我们要解决两个问题： 服务端首屏渲染和客户端激活 。

构建流程

目标是生成一个「服务器 bundle」用于服务端首屏渲染，和一个「客户端bundle」用于客户端激活。
image.png

代码结构

除了两个不同入口之外，其他结构和之前vue应用完全相同。

  1. src
  2. ├── router
  3. ├────── index.js # 路由声明
  4. ├── store
  5. ├────── index.js # 全局状态
  6. ├── main.js # 用于创建vue实例
  7. ├── entry-client.js # 客户端入口，用于静态内容“激活”
  8. └── entry-server.js # 服务端入口，用于首屏内容渲染

路由配置

创建@/router/index.js

  1. import Vue from "vue";
  2. import Router from "vue-router";
  5. Vue.use(Router);
  8. //导出工厂函数
  9. export function createRouter () {
  10.   return new Router({
  11.     mode: 'history',
  12.     routes: [
  13.       // 客户端没有编译器，这里要写成渲染函数
  14.       { path: "/", component: { render: h => h('div', 'index page') } },
  15.       { path: "/detail", component: { render: h => h('div', 'detail page') } }
  16.     ]
  17.   });
  19. }

主文件

跟之前不同，主文件是负责创建vue实例的工厂，每次请求均会有独立的vue实例创建。创建main.js：

  1. import Vue from "vue";
  2. import App from "./App.vue";
  3. import { createRouter } from "./router";
  6. // 导出Vue实例工厂函数，为每次请求创建独立实例
  7. // 上下文用于给vue实例传递参数
  8. export function createApp (context) {
  9.   const router = createRouter();
  10.   const app = new Vue({
  11.     router,
  12.     context,
  13.     render: h => h(App)
  14.   });
  15.   return { app, router };
  16. }

服务端入口

上面的bundle就是webpack打包的服务端bundle，我们需要编写服务端入口文件src/entry-server.js
它的任务是创建Vue实例并根据传入url指定首屏

  1. import { createApp } from "./main";
  4. // 返回一个函数，接收请求上下文，返回创建的vue实例
  5. export default context => {
  6. // 这里返回一个Promise，确保路由或组件准备就绪
  7. return new Promise((resolve, reject) => {
  8. const { app, router } = createApp(context);
  9. // 跳转到首屏的地址
  10. router.push(context.url);
  11. // 路由就绪，返回结果
  12. router.onReady(() => {
  13. resolve(app);
  14. }, reject);
  15. });
  16. };

客户端入口

客户端入口只需创建vue实例并执行挂载，这一步称为激活。创建entry-client.js：

  1. import { createApp } from "./main";
  3. // 创建vue、router实例
  4. const { app, router } = createApp();
  5. // 路由就绪，执行挂载
  6. router.onReady(() => {
  7.   app.$mount("#app");
  8. });

webpack配置

安装依赖

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

具体配置，vue.config.js

  1. // 两个插件分别负责打包客户端和服务端
  2. const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
  3. const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
  4. const nodeExternals = require("webpack-node-externals");
  5. const merge = require("lodash.merge");
  6. // 根据传入环境变量决定入口文件和相应配置项
  7. const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
  8. const target = TARGET_NODE? "server" : "client";
  10. module.exports = {
  11.   css: {
  12.     extract: false
  13.   },
  14.   outputDir: './dist/' + target,
  15.   configureWebpack: () => ({
  16.     // 将 entry 指向应用程序的 server / client 文件
  17.     entry: `./src/entry-${target}.js`,
  18.     // 对 bundle renderer 提供 source map 支持
  19.     devtool: 'source-map',
  20.     // target设置为node使webpack以Node适用的方式处理动态导入，
  21.     // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
  22.     target: TARGET_NODE ? "node" : "web",
  23.     // 是否模拟node全局变量
  24.     node: TARGET_NODE ? undefined : false,
  25.     output: {
  26.       // 此处使用Node⻛格导出模块
  27.       libraryTarget: TARGET_NODE ? "commonjs2" : undefined
  28.     },
  29.     // https://webpack.js.org/configuration/externals/#function
  30.     // https://github.com/liady/webpack-node-externals
  31.     // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。
  32.     externals: TARGET_NODE
  33.       ? nodeExternals({
  34.         // 不要外置化webpack需要处理的依赖模块。
  35.         // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
  36.         // 还应该将修改`global`（例如polyfill）的依赖模块列入白名单
  37.         whitelist: [/\.css$/]
  38.       })
  39.       : undefined,
  40.     optimization: {
  41.       splitChunks: undefined
  42.     },
  43.     // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
  44.     // 服务端默认文件名为 `vue-ssr-server-bundle.json`
  45.     // 客户端默认文件名为 `vue-ssr-client-manifest.json`。
  46.     plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
  47.       VueSSRClientPlugin()]
  48.   }),
  49.   chainWebpack: config => {
  50.     // cli4项目添加
  51.     if (TARGET_NODE) {
  52.       config.optimization.delete('splitChunks')
  53.     }
  56.     config.module
  57.       .rule("vue")
  58.       .use("vue-loader")
  59.       .tap(options => {
  60.         merge(options, {
  61.           optimizeSSR: false
  62.         });
  63.       });
  64.   }
  65. };

脚本配置

安装依赖

  1. npm i cross-env -D

定义创建脚本，package.json

  1. "scripts": {
  2.   "build:client": "vue-cli-service build",
  3.   "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
  4.   "build": "npm run build:server && npm run build:client"
  5. },

执行打包：npm run build

宿主文件

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <!--vue-ssr-outlet-->
  13. </body>
  15. </html>

服务器启动文件

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

  1. // 获取文件路径
  2. const resolve = dir => require('path').resolve(__dirname, dir)
  4. // 第 1 步：开放dist/client目录，关闭默认下载index⻚的选项，不然到不了后面路由
  5. app.use(express.static(resolve('../dist/client'), { index: false }))
  7. // 第 2 步：获得一个createBundleRenderer
  8. const { createBundleRenderer } = require("vue-server-renderer");
  10. // 第 3 步：服务端打包文件地址
  11. const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
  13. // 第 4 步：创建渲染器
  14. const renderer = createBundleRenderer(bundle, {
  15.   runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
  16.   template: require('fs').readFileSync(resolve("../public/index.html"), "utf-8"), // 宿主文件
  17.   clientManifest: require(resolve("../dist/client/vue-ssr-client-manifest.json")) // 客户端清单
  18. });
  20. app.get('*', async (req, res) => {
  21.   // 设置url和title两个重要参数
  22.   const context = {
  23.     title: 'ssr test',
  24.     url: req.url
  25.   }
  26.   const html = await renderer.renderToString(context);
  27.   res.send(html)
  28. })

整合Vuex

安装vuex

  1. npm install -S vuex

store/index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  6. export function createStore () {
  7.   return new Vuex.Store({
  8.     state: {
  9.       count:
  10.     },
  11.     mutations: {
  12.       add (state) {
  13.         state.count += 1;
  14.       }
  15.     }
  16.   })
  17. }

挂载store，main.js

  1. import { createStore } from './store'
  3. export function createApp (context) {
  4.   // 创建实例
  5.   const store = createStore()
  6.   const app = new Vue({
  7.     store, // 挂载
  8.     render: h => h(App)
  9.   })
  10.   return { app, router, store }
  11. }

使用，.src/App.vue

  1. <h2 @click="$store.commit('add')">{{$store.state.count}}</h2>

注意事项：注意打包和重启服务

数据预取

服务器端渲染的是应用程序的”快照”，如果应用依赖于一些异步数据， 那么在开始渲染之前，需要先预取和解析好这些数据 。

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

  1. export function createStore () {
  2.   return new Vuex.Store({
  3.     mutations: {
  4.       // 加一个初始化
  5.       init (state, count) {
  6.         state.count = count;
  7.       },
  8.     },
  9.     actions: {
  10.       // 加一个异步请求count的action
  11.       getCount ({ commit }) {
  12.         return new Promise(resolve => {
  13.           setTimeout(() => {
  14.             commit("init", Math.random() * 100);
  15.             resolve();
  16.           }, 1000);
  17.         });
  18.       },
  19.     },
  20.   });
  21. }

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

  1. export default {
  2.   asyncData ({ store, route }) { // 约定预取逻辑编写在预取钩子asyncData中
  3.     // 触发 action 后，返回 Promise 以便确定请求结果
  4.     return store.dispatch("getCount");
  5.   }
  6. };

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

  1. import { createApp } from "./app";
  3. export default context => {
  4.   return new Promise((resolve, reject) => {
  5.     // 拿出store和router实例
  6.     const { app, router, store } = createApp(context);
  7.     router.push(context.url);
  8.     router.onReady(() => {
  9.       // 获取匹配的路由组件数组
  10.       const matchedComponents = router.getMatchedComponents();
  12.       // 若无匹配则抛出异常
  13.       if (!matchedComponents.length) {
  14.         return reject({ code: 404 });
  15.       }
  17.       // 对所有匹配的路由组件调用可能存在的`asyncData()`
  18.       Promise.all(
  19.         matchedComponents.map(Component => {
  20.           if (Component.asyncData) {
  21.             return Component.asyncData({
  22.               store,
  23.               route: router.currentRoute,
  24.             });
  25.           }
  26.         }),
  27.       )
  28.         .then(() => {
  29.           // 所有预取钩子 resolve 后，
  30.           // store 已经填充入渲染应用所需状态
  31.           // 将状态附加到上下文，且 `template` 选项用于 renderer 时，
  32.           // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
  33.           context.state = store.state;
  35.           resolve(app);
  36.         })
  37.         .catch(reject);
  38.     }, reject);
  39.   });
  40. };

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

  1. // 导出store
  2. const { app, router, store } = createApp();
  4. // 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态自动嵌入到最终的 HTML // 在客户端挂载到应用程序之前，store 就应该获取到状态：
  5. if (window.__INITIAL_STATE__) {
  6.   store.replaceState(window.__INITIAL_STATE__);
  7. }

客户端数据预取处理，main.js

  1. Vue.mixin({
  2.   beforeMount () {
  3.     const { asyncData } = this.$options;
  4.     if (asyncData) {
  5.       // 将获取数据操作分配给 promise
  6.       // 以便在组件中，我们可以在数据准备就绪后
  7.       // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
  8.       this.dataPromise = asyncData({
  9.         store: this.$store,
  10.         route: this.$route,
  11.       });
  12.     }
  13.   },
  14. });

作业

谈谈你对服务端渲染的理解以及使用场景

特点：首屏、seo

优缺点：

  • 复杂度
  • 库的支持性
  • 性能
    • 缓存
    • 降级 cpu 内存， spa

场景：

  • seo、首屏
  • 已存在项目，爬虫puppeteer
  • nuxt.js