SSR解决了什么问题？有做过SSR吗？你是怎么做的？ - 图1

一、是什么

Server-Side Rendering 我们称其为SSR，意为服务端渲染

指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

先来看看Web3个阶段的发展史：

  • 传统服务端渲染SSR
  • 单页面应用SPA
  • 服务端渲染SSR

传统web开发

网页内容在服务端渲染完成，⼀次性传输到浏览器

01.png

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

单页应用SPA

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

02.png

打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容

服务端渲染SSR

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

03.png

看完前端发展，我们再看看Vue官方对SSR的解释：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序

服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行

我们从上门解释得到以下结论：

  • Vue SSR是一个在SPA上进行改良的服务端渲染
  • 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
  • Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA

二、解决了什么

SSR主要解决了以下两种问题：

  • seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
  • 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

但是使用SSR同样存在以下的缺点：

  • 复杂度：整个项目的复杂度
  • 库的支持性，代码兼容
  • 性能问题
    • 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
    • 缓存 node serve、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
    • 降级：监控cpu、内存占用过多，就spa，返回单个的壳
  • 服务器负载变大，相对于前后端分离服务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

所以在我们选择是否使用SSR前，我们需要慎重问问自己这些问题：

  1. 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现
  2. 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

三、如何实现

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

这里需要生成一个服务器bundle文件用于服务端首屏渲染和一个客户端bundle文件用于客户端激活

SSR解决了什么问题？有做过SSR吗？你是怎么做的？ - 图5

代码结构 除了两个不同入口之外，其他结构和之前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 # 服务端⼊⼝，⽤于⾸屏内容渲染

路由配置

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

主文件main.js

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

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

编写服务端入口src/entry-server.js

它的任务是创建Vue实例并根据传入url指定首屏

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

编写客户端入口entry-client.js

客户端入口只需创建vue实例并执行挂载，这⼀步称为激活

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

对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";
  9. module.exports = {
  10.     css: {
  11.         extract: false
  12.     },
  13.     outputDir: './dist/'+target,
  14.     configureWebpack: () => ({
  15.         // 将 entry 指向应⽤程序的 server / client ⽂件
  16.         entry: `./src/entry-${target}.js`,
  17.         // 对 bundle renderer 提供 source map ⽀持
  18.         devtool: 'source-map',
  19.         // target设置为node使webpack以Node适⽤的⽅式处理动态导⼊，
  20.         // 并且还会在编译Vue组件时告知`vue-loader`输出⾯向服务器代码。
  21.         target: TARGET_NODE ? "node" : "web",
  22.         // 是否模拟node全局变量
  23.         node: TARGET_NODE ? undefined : false,
  24.         output: {
  25.             // 此处使⽤Node⻛格导出模块
  26.             libraryTarget: TARGET_NODE ? "commonjs2" : undefined
  27.         },
  28.         // https://webpack.js.org/configuration/externals/#function
  29.         // https://github.com/liady/webpack-node-externals
  30.         // 外置化应⽤程序依赖模块。可以使服务器构建速度更快，并⽣成较⼩的打包⽂件。
  31.         externals: TARGET_NODE
  32.         ? nodeExternals({
  33.             // 不要外置化webpack需要处理的依赖模块。
  34.             // 可以在这⾥添加更多的⽂件类型。例如，未处理 *.vue 原始⽂件，
  35.             // 还应该将修改`global`（例如polyfill）的依赖模块列⼊⽩名单
  36.             whitelist: [/\.css$/]
  37.         })
  38.         : undefined,
  39.         optimization: {
  40.             splitChunks: undefined
  41.         },
  42.         // 这是将服务器的整个输出构建为单个 JSON ⽂件的插件。
  43.         // 服务端默认⽂件名为 `vue-ssr-server-bundle.json`
  44.         // 客户端默认⽂件名为 `vue-ssr-client-manifest.json`。
  45.         plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
  46.                   VueSSRClientPlugin()]
  47.     }),
  48.     chainWebpack: config => {
  49.         // cli4项⽬添加
  50.         if (TARGET_NODE) {
  51.             config.optimization.delete('splitChunks')
  52.         }
  54.         config.module
  55.             .rule("vue")
  56.             .use("vue-loader")
  57.             .tap(options => {
  58.             merge(options, {
  59.                 optimizeSSR: false
  60.             });
  61.         });
  62.     }
  63. };

对脚本进行配置，安装依赖

  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">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.         <title>Document</title>
  8.     </head>
  9.     <body>
  10.         <!--vue-ssr-outlet-->
  11.     </body>
  12. </html>
  1. 是服务端渲染入口位置，注意不能为了好看而在前后加空格

安装vuex

  1. npm install -S vuex

创建vuex工厂函数

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

在main.js文件中挂载store

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

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

在store进行一步数据获取

  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. }

组件中的数据预取逻辑

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

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

  1. // 导出store
  2. const { app, router, store } = createApp();
  3. // 当使⽤ template 时，context.state 将作为 window.__INITIAL_STATE__ 状态⾃动嵌⼊到最终的 HTML 
  4. // 在客户端挂载到应⽤程序之前，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. });

修改服务器启动文件

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

小结

  • 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例
  • 实现ssr需要实现服务端首屏渲染和客户端激活
  • 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
    • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
    • 切换组件通过mixin混入，在beforeMount钩子完成数据获取

参考文献