vue的ssr服務(wù)端渲染示例詳解

更新時(shí)間：2021年04月30日 09:23:34 作者：前端程序猿dzf

這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

為什么使用服務(wù)器端渲染 (SSR)

更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應(yīng)用程序進(jìn)行索引。在這里，同步是關(guān)鍵。如果你的應(yīng)用程序初始展示 loading 菊花圖，然后通過 Ajax 獲取內(nèi)容，抓取工具并不會等待異步完成后再行抓取頁面內(nèi)容。也就是說，如果 SEO 對你的站點(diǎn)至關(guān)重要，而你的頁面又是異步獲取內(nèi)容，則你可能需要服務(wù)器端渲染(SSR)解決此問題。
更快的內(nèi)容到達(dá)時(shí)間 (time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無需等待所有的 JavaScript 都完成下載并執(zhí)行，才顯示服務(wù)器渲染的標(biāo)記，所以你的用戶將會更快速地看到完整渲染的頁面。通?？梢援a(chǎn)生更好的用戶體驗(yàn)，并且對于那些「內(nèi)容到達(dá)時(shí)間(time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言，服務(wù)器端渲染 (SSR) 至關(guān)重要。

使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(quán)衡之處：

開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用；一些外部擴(kuò)展庫 (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 (SPA) 不同，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境。
更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

目錄結(jié)構(gòu)

1、定義打包命令和開發(fā)命令

開發(fā)命令是用于客戶端開發(fā)

打包命令用于部署服務(wù)端開發(fā)

–watch 便于修改文件再自動打包

"client:build": "webpack --config scripts/webpack.client.js --watch",
"server:build": "webpack --config scripts/webpack.server.js --watch",

"run:all": "concurrently \"npm  run client:build\" \"npm run server:build\""

為了同時(shí)跑client:build 和 server:build

1.1 package.json

{
  "name": "11.vue-ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "client:dev": "webpack serve --config scripts/webpack.client.js",
    "client:build": "webpack --config scripts/webpack.client.js --watch",
    "server:build": "webpack --config scripts/webpack.server.js --watch",
    "run:all": "concurrently \"npm  run client:build\" \"npm run server:build\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^5.3.0",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "vue": "^2.6.12",
    "vue-router": "^3.4.9",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^3.6.0",
    "webpack-merge": "^5.7.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}

1.2 webpack.base.js 基礎(chǔ)配置

// webpack打包的入口文件 ， 需要導(dǎo)出配置

// webpack webpack-cli
// @babel/core babel的核心模塊 
// babel-loader  webpack和babel的一個(gè)橋梁
// @babel/preset-env  把es6+ 轉(zhuǎn)換成低級語法

// vue-loader vue-template-compiler  解析.vue文件 并且編譯模板
// vue-style-loader css-loader 解析css樣式并且插入到style標(biāo)簽中， vue-style-loader支持服務(wù)端渲染
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: 'development',
    output: {
        filename: '[name].bundle.js' ,// 默認(rèn)就是main, 默認(rèn)是dist目錄
        path:path.resolve(__dirname,'../dist')
    },
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
            test: /\.js$/,
            use: {
                loader: 'babel-loader', // @babel/core -> preset-env
                options: {
                    presets: ['@babel/preset-env'], // 插件的集合 
                }
            },
            exclude: /node_modules/ // 表示node_modules的下的文件不需要查找
        }, {
            test: /\.css$/,
            use: ['vue-style-loader', {
                loader: 'css-loader',
                options: {
                    esModule: false, // 注意為了配套使用vue-style-loader
                }
            }] // 從右向左執(zhí)行
        }]
    },
    plugins: [
        new VueLoaderPlugin() // 固定的
    ]
}

1.3 webpack.client.js 配置是客戶端開發(fā)配置就是正常的vue spa開發(fā)模式的配置

const {merge} = require('webpack-merge');
const base =require('./webpack.base');
const path = require('path')
const  HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = merge(base,{
    entry: {
        client:path.resolve(__dirname, '../src/client-entry.js')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html'),
            filename:'client.html'
            // 默認(rèn)的名字叫index.html
        }),
    ]
})

1.4 webpack.server.js配置是打包后用于服務(wù)端部署時(shí)引入的使用

const base =require('./webpack.base')
const {merge} = require('webpack-merge');
const  HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = merge(base,{
    target:'node',
    entry: {
        server:path.resolve(__dirname, '../src/server-entry.js')
    },
    output:{
        libraryTarget:"commonjs2" // module.exports 導(dǎo)出
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.ssr.html'),
            filename:'server.html',
            excludeChunks:['server'],
            minify:false,
            client:'/client.bundle.js'
            // 默認(rèn)的名字叫index.html
        }),
    ]
})

excludeChunks:[‘server'] 不引入 server.bundle.js包

client 是變量
minify 是不壓縮

filename是打包后的生成的html文件名字

template：模板文件

2、編寫html文件

兩份：

2.1 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

2.2 public/index.ssr.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->

    <!-- ejs模板 -->
    <script src="<%=htmlWebpackPlugin.options.client%>"></script>
</body>
</html>

<!--vue-ssr-outlet-->  是服務(wù)端渲染dom用到的插槽位置  固定寫法
<%=htmlWebpackPlugin.options.client%>  填充htmlwebpackplugin的變量

3、按照正常的vue開發(fā), 編寫對應(yīng)文件

定義一個(gè)app.js文件

src/app.js

入口改裝成了函數(shù) 目的是服務(wù)端渲染時(shí) 每次訪問的適合都可以通過這個(gè)工廠函數(shù)返回一個(gè)全新的實(shí)例，保證每個(gè)人訪問都可以拿到一個(gè)自己的實(shí)例

import Vue from 'vue';
import App from './App.vue'
import createRouter from './router.js'
import createStore from './store.js'
// 入口改裝成了函數(shù) 目的是服務(wù)端渲染時(shí) 每次訪問的適合都可以通過這個(gè)工廠函數(shù)返回一個(gè)全新的實(shí)例，保證每個(gè)人訪問都可以拿到一個(gè)自己的實(shí)例
export default () => {
    const router = createRouter();
    const store = createStore()
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    });
    return { app, router,store }
}

src/app.vue

<template>
  <div id="app">
    <router-link to="/">foo</router-link>
    <router-link to="/bar">bar</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>

src/component/Bar.vue

<template>
  <div>
    {{ $store.state.name }}  
   
  </div>
</template>

<style scoped="true">
div {
  background: red;
}
</style>

<script>
export default {
    asyncData(store){ // 在服務(wù)端執(zhí)行的方法  ，只是這個(gè)方法在后端執(zhí)行
      console.log('server call')
       // axios.get('/服務(wù)端路徑')
        return Promise.resolve('success')
    },
    mounted(){ // 瀏覽器執(zhí)行 ，后端忽略
      
    }
}
</script>

src/component/Foo.vue

<template>
    <div @click="show">foo</div>
</template>
<script>
export default {
    methods:{
        show(){
            alert(1)
        }
    }
}
</script>

src/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'
Vue.use(VueRouter);// 內(nèi)部會提供兩個(gè)全局組件 Vue.component()


// 每個(gè)人訪問服務(wù)器都需要產(chǎn)生一個(gè)路由系統(tǒng)

export default ()=>{
    let router = new VueRouter({
        mode:'history',
        routes:[
            {path:'/',component:Foo},
            {path:'/bar',component:Bar}, // 懶加載，根據(jù)路徑動態(tài)加載對應(yīng)的組件
            {path:'*',component:{
                render:(h)=>h('div',{},'404')
            }}
        ]
    });
    return router;
}




//前端的路由的兩種方式 hash  history

// hash # 

// 路由就是根據(jù)路徑的不同渲染不同的組件 hash值特點(diǎn)是hash值變化不會導(dǎo)致頁面重新渲染，我們可以監(jiān)控hash值的變化 顯示對應(yīng)組件 （可以產(chǎn)生歷史記錄）  hashApi 特點(diǎn)就是丑  （服務(wù)端獲取不到hash值，）

// historyApi H5的api  漂亮。問題是刷新時(shí)會產(chǎn)生404。

src/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
// 服務(wù)端中使用vuex ，將數(shù)據(jù)保存到全局變量中 window，瀏覽器用服務(wù)端渲染好的數(shù)據(jù)，進(jìn)行替換
export default ()=>{
    let store = new Vuex.Store({
        state:{
            name:'zhufeng'
        },
        mutations:{
            changeName(state,payload){
                state.name = payload
            }
        },
        actions:{
            changeName({commit}){// store.dispatch('changeName')
                return new Promise((resolve,reject)=>{
                    setTimeout(() => {
                        commit('changeName','jiangwen');
                        resolve();
                    }, 5000);
                })
            }
        }

    });

    if(typeof window!='undefined' && window.__INITIAL_STATE__){
        // 瀏覽器開始渲染了

        // 將后端渲染好的結(jié)果 同步給前端  vuex中核心方法
        store.replaceState(window.__INITIAL_STATE__); // 用服務(wù)端加載好的數(shù)據(jù)替換掉
    }
    return store;
}

4、定義入口文件

客戶端包的打包入口文件：

src/client-entry.js 用于客戶端的js入口文件

import createApp from './app.js';
let {app} = createApp();
app.$mount('#app'); // 客戶端渲染可以直接使用client-entry.js

src/server-entry.js 服務(wù)端的入口文件

是一個(gè)函數(shù) 在服務(wù)端請求時(shí) 再各自去執(zhí)行，給sever.js去執(zhí)行用的

// 服務(wù)端入口


import createApp from './app.js';


// 服務(wù)端渲染可以返回一個(gè)函數(shù)

export default (context) => { // 服務(wù)端調(diào)用方法時(shí)會傳入url屬性
    // 此方法是在服務(wù)端調(diào)用的
    // 路由是異步組件 所以這里我需要等待路由加載完畢
    const { url } = context;
    return new Promise((resolve, reject) => { // renderToString()
        let { app, router, store } = createApp(); // vue-router
        router.push(url); // 表示永遠(yuǎn)跳轉(zhuǎn)/路徑
        router.onReady(() => { // 等待路由跳轉(zhuǎn)完畢 組件已經(jīng)準(zhǔn)備號了觸發(fā)
            const matchComponents = router.getMatchedComponents(); // /abc


            if (matchComponents.length == 0) { //沒有匹配到前端路由
                return reject({ code: 404 });
            } else {
                // matchComponents 指的是路由匹配到的所有組件 （頁面級別的組件）
                Promise.all(matchComponents.map(component => {
                    if (component.asyncData) { // 服務(wù)端在渲染的時(shí)候 默認(rèn)會找到頁面級組件中的asyncData，并且在服務(wù)端也會創(chuàng)建一個(gè)vuex ，傳遞給asyncData
                        return component.asyncData(store)
                    }
                })).then(()=>{ // 會默認(rèn)在window下生成一個(gè)變量 內(nèi)部默認(rèn)就這樣做的
                    // "window.__INITIAL_STATE__={"name":"jiangwen"}"
                    context.state = store.state; //  服務(wù)器執(zhí)行完畢后，最新的狀態(tài)保存在store.state上
                    resolve(app); // app是已經(jīng)獲取到數(shù)據(jù)的實(shí)例
                })
            }
        })
    })



    // app 對應(yīng)的就是newVue 并沒有被路由所管理，我希望等到路由跳轉(zhuǎn)完畢后 在進(jìn)行服務(wù)端渲染

    // 當(dāng)用戶訪問了一個(gè)不存在的頁面，如何匹配到前端的路由

    // 每次都能產(chǎn)生一個(gè)新的應(yīng)用
}

// 當(dāng)用戶訪問bar的時(shí)候：我在服務(wù)端直接進(jìn)行了服務(wù)端渲染，渲染后的結(jié)果返回給了瀏覽器。 瀏覽器加載js腳本，根據(jù)路徑加載js腳本，用重新渲染了bar

component.asyncData 是一個(gè)異步請求等待請求結(jié)束后再設(shè)置context.state = store.state; 此時(shí) “window.INITIAL_STATE={“name”:“jiangwen”}”
客戶端的store就能拿到window.INITIAL_STATE 重新賦值。

5、定義服務(wù)端文件 server.js ，用node部署的一個(gè)服務(wù)器，請求對應(yīng)的模板文件

用了koa、koa-router做請求處理

vue-server-renderer是服務(wù)端渲染必備包

koa-static 是處理靜態(tài)資源的請求比如js等文件

serverBundle 是打包后的js

template 是服務(wù)端入口打包后的html server:build

const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router();
const VueServerRenderer = require('vue-server-renderer')
const static = require('koa-static')

const fs = require('fs');
const path = require('path')
const serverBundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.bundle.js'), 'utf8')
const template = fs.readFileSync(path.resolve(__dirname, 'dist/server.html'), 'utf8');


// 根據(jù)實(shí)例  創(chuàng)建一個(gè)渲染器 傳入打包后的js 和 傳入模板文件
const render = VueServerRenderer.createBundleRenderer(serverBundle, {
    template
})

// 請求到localhost:3000/ 根據(jù)請求url參數(shù)  -》 {url:ctx.url}，傳給serverBundle   則 會根據(jù)服務(wù)端的打包的.js 路由系統(tǒng) 渲染出一份有該路由完整dom解構(gòu)的頁面
router.get('/', async (ctx) => {
    console.log('跳轉(zhuǎn)')
    ctx.body = await new Promise((resolve, reject) => {
        render.renderToString({url:ctx.url},(err, html) => { // 如果想讓css生效 只能使用回調(diào)的方式
            if (err) reject(err);
            resolve(html)
        })
    })
    //    const html = await render.renderToString(); // 生成字符串
    //    console.log(html)
})

// 當(dāng)用戶訪問一個(gè)不存在的路徑的服務(wù)端路徑 我就返回給你首頁，你通過前端的js渲染的時(shí)候，會重新根據(jù)路徑渲染組件

// 只要用戶刷新就會像服務(wù)器發(fā)請求
router.get('/(.*)',async (ctx)=>{
    console.log('跳轉(zhuǎn)')
    ctx.body = await new Promise((resolve, reject) => {
        render.renderToString({url:ctx.url},(err, html) => { // 通過服務(wù)端渲染 渲染后返回
            if (err && err.code == 404) resolve(`not found`);
            console.log(html)
            resolve(html)
        })
    })
})


// 當(dāng)客戶端發(fā)送請求時(shí)會先去dist目錄下查找
app.use(static(path.resolve(__dirname,'dist'))); // 順序問題
app.use(router.routes());

// 保證先走自己定義的路由 在找靜態(tài)文件
app.listen(3000);

5.1 請求到localhost:3000/ 根據(jù)請求url參數(shù) -》 {url:ctx.url}，傳給serverBundle 則會根據(jù)服務(wù)端的打包的.js 路由系統(tǒng) 渲染出一份有該路由完整dom解構(gòu)的頁面

因?yàn)?/ 對應(yīng)的組件是Foo, 所以頁面展示Foo

網(wǎng)頁源代碼都是解析后的dom了可以用于seo

5.2 如果請求了 http://localhost:3000/bar

那么就會走 /(.*)的路由

renderToString傳入url

就會走

server-entry.js文件的默認(rèn)函數(shù) 這個(gè)js也是一個(gè)vue包含了所有客戶端原本的邏輯只不過是放在服務(wù)端操作。

url就是 /bar

根據(jù)路由 /bar 取出Bar組件

router跳到bar 此時(shí)頁面就會是bar組件了

同時(shí)執(zhí)行asyncData函數(shù) ，可能會改寫store或者其他數(shù)據(jù)

然后記得賦值 context.state = store.state 就會在window加上store的state對象

window.INITIAL_STATE={“name”:“jiangwen”}

store.js記得重新處理下(window.INITIAL_STATE

store.replaceState(window.INITIAL_STATE) 就是把服務(wù)端的狀態(tài)放在客戶端

dist/server.html 打包后，引入了/client.bundle.js 所以要有koa-static去做靜態(tài)請求處理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->

    <!-- ejs模板 -->
    <script src="/client.bundle.js"></script>
</body>
</html>

6、部署

6.1 執(zhí)行命令 npm run run:all

"run:all": "concurrently \"npm  run client:build\" \"npm run server:build\""

就是打包了客戶端和服務(wù)端的資源包包含js html 等

然后把整個(gè)server.js也放在服務(wù)器

執(zhí)行node server.js 就能啟動node服務(wù)器了

6.2 server.js里面指向的server.bundle.js和server.html指向對應(yīng)服務(wù)器文件夾就行

命令解釋

client:dev 開發(fā)時(shí)用spa渲染模式開發(fā)，不考慮ssr, client.bundle.js和 client.html是正常的spa部署時(shí)用到
run:all 服務(wù)端渲染模式是客戶端、服務(wù)端都打包

服務(wù)端使用時(shí) ，client.bundle.js在瀏覽器使用， server.bundle.js 在服務(wù)器使用。

7、總結(jié)

1、SSR 首先要有個(gè)node服務(wù)器、還有配合vue-server-renderer包使用。

2、正常的vue開發(fā)即可，考慮beforeMount 或 mounted生命周期不能在服務(wù)器端使用就行。

3、創(chuàng)建server.js 集合koa或者express 做請求解析然后傳入 serverBundle和template給

VueServerRenderer.createBundleRenderer函數(shù)

得到一個(gè)render

4、render.renderToString傳入請求的路由比如 /bar

5、此時(shí)會進(jìn)入serverBundle默認(rèn)函數(shù)（server-entry.js打包得出的），創(chuàng)建一個(gè)vue實(shí)例app，分析路由 vue實(shí)例然后跳轉(zhuǎn)路由，此時(shí)都是服務(wù)端的vue實(shí)例的變動而已，還沒反應(yīng)到頁面

6、執(zhí)行對應(yīng)組件的asyncData函數(shù)，可能會改變store.state 那么在 context.state賦值就行

7、resolve(app) 此時(shí) server.js里面的render根據(jù)此時(shí)的vue實(shí)例app的路由狀態(tài)解析出dom，返回給頁面 ctx.body = …resolve(html);

8、此時(shí)頁面拿到正常路由匹配后的dom結(jié)構(gòu)

9、html里面會有window.INITIAL_STATE={“name”:“zhufeng”} 相當(dāng)于記錄了服務(wù)端的store狀態(tài)

10、客戶端執(zhí)行到store時(shí) 其實(shí)沒有服務(wù)端那些改變后的狀態(tài)的，執(zhí)行 store.replaceState(window.INITIAL_STATE); 就能替換了服務(wù)端的狀態(tài)

11、整體就是服務(wù)端客戶端都有一個(gè)js包，提前在服務(wù)端跑js包，然后解析出dom, dom展現(xiàn)，服務(wù)端就結(jié)束了，剩下的邏輯交給客戶端的js去處理。

概念圖

官網(wǎng)：

vue-server-renderer 和 vue 必須匹配版本。
vue-server-renderer 依賴一些 Node.js 原生模塊，因此只能在 Node.js 中使用。我們可能會提供一個(gè)更簡單的構(gòu)建，可以在將來在其他「JavaScript 運(yùn)行時(shí)(runtime)」運(yùn)行。