一、是什么

Server-Side Rendering 我們稱其為SSR，意為服務(wù)端渲染

指由服務(wù)側(cè)完成頁面的 HTML 結(jié)構(gòu)拼接的頁面處理技術(shù)，發(fā)送到瀏覽器，然后為其綁定狀態(tài)與事件，成為完全可交互頁面的過程

先來看看Web3個階段的發(fā)展史：

• 傳統(tǒng)服務(wù)端渲染SSR
• 單頁面應(yīng)用SPA
• 服務(wù)端渲染SSR

傳統(tǒng)web開發(fā)

網(wǎng)頁內(nèi)容在服務(wù)端渲染完成，?次性傳輸?shù)綖g覽器

03.png

打開頁面查看源碼，瀏覽器拿到的是全部的dom結(jié)構(gòu)

單頁應(yīng)用SPA

單頁應(yīng)用優(yōu)秀的用戶體驗，使其逐漸成為主流，頁面內(nèi)容由JS渲染出來，這種方式稱為客戶端渲染

image.png

打開頁面查看源碼，瀏覽器拿到的僅有宿主元素#app，并沒有內(nèi)容

服務(wù)端渲染SSR

SSR解決方案，后端渲染出完整的首屏的dom結(jié)構(gòu)返回，前端拿到的內(nèi)容包括首屏及完整spa結(jié)構(gòu)，應(yīng)用激活后依然按照spa方式運行

image.png

看完前端發(fā)展，我們再看看Vue官方對SSR的解釋：

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序
服務(wù)器渲染的 Vue.js 應(yīng)用程序也可以被認(rèn)為是"同構(gòu)"或"通用"，因為應(yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運行

我們從上門解釋得到以下結(jié)論：

• Vue SSR是一個在SPA上進(jìn)行改良的服務(wù)端渲染
• 通過Vue SSR渲染的頁面，需要在客戶端激活才能實現(xiàn)交互
• Vue SSR將包含兩部分：服務(wù)端渲染的首屏，包含交互的SPA

二、解決了什么

SSR主要解決了以下兩種問題：

• seo：搜索引擎優(yōu)先爬取頁面HTML結(jié)構(gòu)，使用ssr時，服務(wù)端已經(jīng)生成了和業(yè)務(wù)想關(guān)聯(lián)的HTML，有利于seo
• 首屏呈現(xiàn)渲染：用戶無需等待頁面所有js加載完成就可以看到頁面視圖（壓力來到了服務(wù)器，所以需要權(quán)衡哪些用服務(wù)端渲染，哪些交給客戶端）

但是使用SSR同樣存在以下的缺點：

• 復(fù)雜度：整個項目的復(fù)雜度
• 庫的支持性，代碼兼容
• 性能問題
  每個請求都是n個實例的創(chuàng)建，不然會污染，消耗會變得很大
  緩存 node serve、 nginx判斷當(dāng)前用戶有沒有過期，如果沒過期的話就緩存，用剛剛的結(jié)果。
  降級：監(jiān)控cpu、內(nèi)存占用過多，就spa，返回單個的殼
• 服務(wù)器負(fù)載變大，相對于前后端分離務(wù)器只需要提供靜態(tài)資源來說，服務(wù)器負(fù)載更大，所以要慎重使用

所以在我們選擇是否使用SSR前，我們需要慎重問問自己這些問題：

• 需要SEO的頁面是否只是少數(shù)幾個，這些是否可以使用預(yù)渲染（Prerender SPA Plugin）實現(xiàn)
• 首屏的請求響應(yīng)邏輯是否復(fù)雜，數(shù)據(jù)返回是否大量且緩慢

三、如何實現(xiàn)

對于同構(gòu)開發(fā)，我們依然使用webpack打包，我們要解決兩個問題：服務(wù)端首屏渲染和客戶端激活

這里需要生成一個服務(wù)器bundle文件用于服務(wù)端首屏渲染和一個客戶端bundle文件用于客戶端激活

image.png

代碼結(jié)構(gòu) 除了兩個不同入口之外，其他結(jié)構(gòu)和之前vue應(yīng)用完全相同

src
├── router
├────── index.js # 路由聲明
├── store
├────── index.js # 全局狀態(tài)
├── main.js # ?于創(chuàng)建vue實例
├── entry-client.js # 客戶端??，?于靜態(tài)內(nèi)容“激活”
└── entry-server.js # 服務(wù)端??，?于?屏內(nèi)容渲染

路由配置

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

Vue.use(Router);
//導(dǎo)出??函數(shù)

export function createRouter() {
    return new Router({
        mode: 'history',
        routes: [
            // 客戶端沒有編譯器，這?要寫成渲染函數(shù)
            { path: "/", component: { render: h => h('div', 'index page') } },
            { path: "/detail", component: { render: h => h('div', 'detail page') } }
        ]
    });
}

主文件main.js
跟之前不同，主文件是負(fù)責(zé)創(chuàng)建vue實例的工廠，每次請求均會有獨立的vue實例創(chuàng)建

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router";
// 導(dǎo)出Vue實例??函數(shù)，為每次請求創(chuàng)建獨?實例
// 上下??于給vue實例傳遞參數(shù)
export function createApp(context) {
    const router = createRouter();
    const app = new Vue({
        router,
        context,
        render: h => h(App)
    });
    return { app, router };
}

編寫服務(wù)端入口src/entry-server.js
它的任務(wù)是創(chuàng)建Vue實例并根據(jù)傳入url指定首屏

import { createApp } from "./main";
// 返回?個函數(shù)，接收請求上下?，返回創(chuàng)建的vue實例
export default context => {
    // 這?返回?個Promise，確保路由或組件準(zhǔn)備就緒
    return new Promise((resolve, reject) => {
        const { app, router } = createApp(context);
        // 跳轉(zhuǎn)到?屏的地址
        router.push(context.url);
        // 路由就緒，返回結(jié)果
        router.onReady(() => {
            resolve(app);
        }, reject);
    });
};

編寫客戶端入口entry-client.js
客戶端入口只需創(chuàng)建vue實例并執(zhí)行掛載，這?步稱為激活

import { createApp } from "./main";
// 創(chuàng)建vue、router實例
const { app, router } = createApp();
// 路由就緒，執(zhí)?掛載
router.onReady(() => {
    app.$mount("#app");
});

對webpack進(jìn)行配置
安裝依賴

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

對vue.config.js進(jìn)行配置

// 兩個插件分別負(fù)責(zé)打包客戶端和服務(wù)端
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");
// 根據(jù)傳?環(huán)境變量決定???件和相應(yīng)配置項
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
    css: {
        extract: false
    },
    outputDir: './dist/'+target,
    configureWebpack: () => ({
        // 將 entry 指向應(yīng)?程序的 server / client ?件
        entry: `./src/entry-${target}.js`,
        // 對 bundle renderer 提供 source map ?持
        devtool: 'source-map',
        // target設(shè)置為node使webpack以Node適?的?式處理動態(tài)導(dǎo)?，
        // 并且還會在編譯Vue組件時告知`vue-loader`輸出?向服務(wù)器代碼。
        target: TARGET_NODE ? "node" : "web",
        // 是否模擬node全局變量
        node: TARGET_NODE ? undefined : false,
        output: {
            // 此處使?Node?格導(dǎo)出模塊
            libraryTarget: TARGET_NODE ? "commonjs2" : undefined
        },
        // https://webpack.js.org/configuration/externals/#function
        // https://github.com/liady/webpack-node-externals
        // 外置化應(yīng)?程序依賴模塊?？梢允狗?wù)器構(gòu)建速度更快，并?成較?的打包?件。
        externals: TARGET_NODE
        ? nodeExternals({
            // 不要外置化webpack需要處理的依賴模塊。
            // 可以在這?添加更多的?件類型。例如，未處理 *.vue 原始?件，
            // 還應(yīng)該將修改`global`（例如polyfill）的依賴模塊列??名單
            whitelist: [/\.css$/]
        })
        : undefined,
        optimization: {
            splitChunks: undefined
        },
        // 這是將服務(wù)器的整個輸出構(gòu)建為單個 JSON ?件的插件。
        // 服務(wù)端默認(rèn)?件名為 `vue-ssr-server-bundle.json`
        // 客戶端默認(rèn)?件名為 `vue-ssr-client-manifest.json`。
        plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
                  VueSSRClientPlugin()]
    }),
    chainWebpack: config => {
        // cli4項?添加
        if (TARGET_NODE) {
            config.optimization.delete('splitChunks')
        }

        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
            merge(options, {
                optimizeSSR: false
            });
        });
    }
};

對腳本進(jìn)行配置，安裝依賴

npm i cross-env -D

定義創(chuàng)建腳本package.json

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

執(zhí)行打包：npm run build

最后修改宿主文件/public/index.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>Document</title>
    </head>
    <body>
        <!--vue-ssr-outlet-->
    </body>
</html>

是服務(wù)端渲染入口位置，注意不能為了好看而在前后加空格

安裝vuex

npm install -S vuex

創(chuàng)建vuex工廠函數(shù)

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

在main.js文件中掛載store

import { createStore } from './store'
export function createApp (context) {
    // 創(chuàng)建實例
    const store = createStore()
    const app = new Vue({
        store, // 掛載
        render: h => h(App)
    })
    return { app, router, store }
}

服務(wù)器端渲染的是應(yīng)用程序的"快照"，如果應(yīng)用依賴于?些異步數(shù)據(jù)，那么在開始渲染之前，需要先預(yù)取和解析好這些數(shù)據(jù)

在store進(jìn)行一步數(shù)據(jù)獲取

export function createStore() {
    return new Vuex.Store({
        mutations: {
            // 加?個初始化
            init(state, count) {
                state.count = count;
            },
        },
        actions: {
            // 加?個異步請求count的action
            getCount({ commit }) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        commit("init", Math.random() * 100);
                        resolve();
                    }, 1000);
                });
            },
        },
    });
}

組件中的數(shù)據(jù)預(yù)取邏輯

export default {
    asyncData({ store, route }) { // 約定預(yù)取邏輯編寫在預(yù)取鉤?asyncData中
        // 觸發(fā) action 后，返回 Promise 以便確定請求結(jié)果
        return store.dispatch("getCount");
    }
};

服務(wù)端數(shù)據(jù)預(yù)取，entry-server.js

import { createApp } from "./app";
export default context => {
    return new Promise((resolve, reject) => {
        // 拿出store和router實例
        const { app, router, store } = createApp(context);
        router.push(context.url);
        router.onReady(() => {
            // 獲取匹配的路由組件數(shù)組
            const matchedComponents = router.getMatchedComponents();

            // 若?匹配則拋出異常
            if (!matchedComponents.length) {
                return reject({ code: 404 });
            }

            // 對所有匹配的路由組件調(diào)?可能存在的`asyncData()`
            Promise.all(
                matchedComponents.map(Component => {
                    if (Component.asyncData) {
                        return Component.asyncData({
                            store,
                            route: router.currentRoute,
                        });
                    }
                }),
            )
                .then(() => {
                // 所有預(yù)取鉤? resolve 后，
                // store 已經(jīng)填充?渲染應(yīng)?所需狀態(tài)
                // 將狀態(tài)附加到上下?，且 `template` 選項?于 renderer 時，
                // 狀態(tài)將?動序列化為 `window.__INITIAL_STATE__`，并注? HTML
                context.state = store.state;

                resolve(app);
            })
                .catch(reject);
        }, reject);
    });
};

客戶端在掛載到應(yīng)用程序之前，store 就應(yīng)該獲取到狀態(tài)，entry-client.js

// 導(dǎo)出store
const { app, router, store } = createApp();
// 當(dāng)使? template 時，context.state 將作為 window.__INITIAL_STATE__ 狀態(tài)?動嵌?到最終的 HTML 
// 在客戶端掛載到應(yīng)?程序之前，store 就應(yīng)該獲取到狀態(tài)：
if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
}

客戶端數(shù)據(jù)預(yù)取處理，main.js

Vue.mixin({
    beforeMount() {
        const { asyncData } = this.$options;
        if (asyncData) {
            // 將獲取數(shù)據(jù)操作分配給 promise
            // 以便在組件中，我們可以在數(shù)據(jù)準(zhǔn)備就緒后
            // 通過運? `this.dataPromise.then(...)` 來執(zhí)?其他任務(wù)
            this.dataPromise = asyncData({
                store: this.$store,
                route: this.$route,
            });
        }
    },
});

修改服務(wù)器啟動文件

// 獲取?件路徑
const resolve = dir => require('path').resolve(__dirname, dir)
// 第 1 步：開放dist/client?錄，關(guān)閉默認(rèn)下載index?的選項，不然到不了后?路由
app.use(express.static(resolve('../dist/client'), {index: false}))
// 第 2 步：獲得?個createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步：服務(wù)端打包?件地址
const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
// 第 4 步：創(chuàng)建渲染器
const renderer = createBundleRenderer(bundle, {
    runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
    template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主?件
    clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客戶端清單
});
app.get('*', async (req,res)=>{
    // 設(shè)置url和title兩個重要參數(shù)
    const context = {
        title:'ssr test',
        url:req.url
    }
    const html = await renderer.renderToString(context);
    res.send(html)
})

小結(jié)*

• 使用ssr不存在單例模式，每次用戶請求都會創(chuàng)建一個新的vue實例
• 實現(xiàn)ssr需要實現(xiàn)服務(wù)端首屏渲染和客戶端激活
• 服務(wù)端異步獲取數(shù)據(jù)asyncData可以分為首屏異步獲取和切換組件獲取
  • 首屏異步獲取數(shù)據(jù)，在服務(wù)端預(yù)渲染的時候就應(yīng)該已經(jīng)完成
  • 切換組件通過mixin混入，在beforeMount鉤子完成數(shù)據(jù)獲取