為什么使用服務器端渲染 (SSR)
- 更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面，
請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應用程式進行索引，在這里，同步是關鍵，如果你的應用程式初始展示 loading 徑訓圖，然后通過 Ajax 獲取內容，抓取工具并不會等待異步完成后再行抓取頁面內容，也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是異步獲取內容，則你可能需要服務器端渲染(SSR)解決此問題， - 更快的內容到達時間 (time-to-content)，特別是對于緩慢的網路情況或運行緩慢的設備，無需等待所有的 JavaScript 都完成下載并執行，才顯示服務器渲染的標記，所以你的用戶將會更快速地看到完整渲染的頁面，通常可以產生更好的用戶體驗，并且對于那些「內容到達時間(time-to-content) 與轉化率直接相關」的應用程式而言，服務器端渲染 (SSR) 至關重要，
使用服務器端渲染 (SSR) 時還需要有一些權衡之處：
- 開發條件所限，瀏覽器特定的代碼，只能在某些生命周期鉤子函式 (lifecycle hook) 中使用；一些外部擴展庫 (external library) 可能需要特殊處理，才能在服務器渲染應用程式中運行，
- 涉及構建設定和部署的更多要求，與可以部署在任何靜態檔案服務器上的完全靜態單頁面應用程式 (SPA) 不同，服務器渲染應用程式，需要處于 Node.js server 運行環境，
- 更多的服務器端負載，在 Node.js 中渲染完整的應用程式，顯然會比僅僅提供靜態檔案的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預料在高流量環境 (high traffic) 下使用，請準備相應的服務器負載，并明智地采用快取策略，
目錄結構
1、定義打包命令 和 開發命令
開發命令是用于客戶端開發
打包命令用于部署服務端開發
–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\""
為了同時跑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 基礎配置
// webpack打包的入口檔案 ， 需要匯出配置
// webpack webpack-cli
// @babel/core babel的核心模塊
// babel-loader webpack和babel的一個橋梁
// @babel/preset-env 把es6+ 轉換成低級語法
// vue-loader vue-template-compiler 決議.vue檔案 并且編譯模板
// vue-style-loader css-loader 決議css樣式并且插入到style標簽中， vue-style-loader支持服務端渲染
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' ,// 默認就是main, 默認是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
}
}] // 從右向左執行
}]
},
plugins: [
new VueLoaderPlugin() // 固定的
]
}
1.3 webpack.client.js 配置是客戶端開發配置 就是正常的vue spa開發模式的配置
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'
// 默認的名字叫index.html
}),
]
})
1.4 webpack.server.js配置是打包后 用于服務端部署時引入的使用
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 匯出
},
plugins:[
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.ssr.html'),
filename:'server.html',
excludeChunks:['server'],
minify:false,
client:'/client.bundle.js'
// 默認的名字叫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--> 是服務端渲染dom用到的插槽位置 固定寫法
<%=htmlWebpackPlugin.options.client%> 填充htmlwebpackplugin的變數
3、按照正常的vue開發, 撰寫對應檔案
定義一個app.js檔案
src/app.js
入口改裝成了函式 目的是服務端渲染時 每次訪問的適合都可以通過這個工廠函式回傳一個全新的實體，保證每個人訪問都可以拿到一個自己的實體
import Vue from 'vue';
import App from './App.vue'
import createRouter from './router.js'
import createStore from './store.js'
// 入口改裝成了函式 目的是服務端渲染時 每次訪問的適合都可以通過這個工廠函式回傳一個全新的實體，保證每個人訪問都可以拿到一個自己的實體
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){ // 在服務端執行的方法 ，只是這個方法在后端執行
console.log('server call')
// axios.get('/服務端路徑')
return Promise.resolve('success')
},
mounted(){ // 瀏覽器執行 ，后端忽略
}
}
</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);// 內部會提供兩個全域組件 Vue.component()
// 每個人訪問服務器都需要產生一個路由系統
export default ()=>{
let router = new VueRouter({
mode:'history',
routes:[
{path:'/',component:Foo},
{path:'/bar',component:Bar}, // 懶加載，根據路徑動態加載對應的組件
{path:'*',component:{
render:(h)=>h('div',{},'404')
}}
]
});
return router;
}
//前端的路由的兩種方式 hash history
// hash #
// 路由就是根據路徑的不同渲染不同的組件 hash值特點是hash值變化不會導致頁面重新渲染，我們可以監控hash值的變化 顯示對應組件 （可以產生歷史記錄） hashApi 特點就是丑 （服務端獲取不到hash值，）
// historyApi H5的api 漂亮，問題是重繪時會產生404，
src/store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 服務端中使用vuex ，將資料保存到全域變數中 window，瀏覽器用服務端渲染好的資料，進行替換
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__){
// 瀏覽器開始渲染了
// 將后端渲染好的結果 同步給前端 vuex中核心方法
store.replaceState(window.__INITIAL_STATE__); // 用服務端加載好的資料替換掉
}
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 服務端的入口檔案
是一個函式 在服務端請求時 再各自去執行， 給sever.js去執行用的
// 服務端入口
import createApp from './app.js';
// 服務端渲染可以回傳一個函式
export default (context) => { // 服務端呼叫方法時會傳入url屬性
// 此方法是在服務端呼叫的
// 路由是異步組件 所以這里我需要等待路由加載完畢
const { url } = context;
return new Promise((resolve, reject) => { // renderToString()
let { app, router, store } = createApp(); // vue-router
router.push(url); // 表示永遠跳轉/路徑
router.onReady(() => { // 等待路由跳轉完畢 組件已經準備號了觸發
const matchComponents = router.getMatchedComponents(); // /abc
if (matchComponents.length == 0) { //沒有匹配到前端路由
return reject({ code: 404 });
} else {
// matchComponents 指的是路由匹配到的所有組件 （頁面級別的組件）
Promise.all(matchComponents.map(component => {
if (component.asyncData) { // 服務端在渲染的時候 默認會找到頁面級組件中的asyncData，并且在服務端也會創建一個vuex ，傳遞給asyncData
return component.asyncData(store)
}
})).then(()=>{ // 會默認在window下生成一個變數 內部默認就這樣做的
// "window.__INITIAL_STATE__={"name":"jiangwen"}"
context.state = store.state; // 服務器執行完畢后，最新的狀態保存在store.state上
resolve(app); // app是已經獲取到資料的實體
})
}
})
})
// app 對應的就是newVue 并沒有被路由所管理，我希望等到路由跳轉完畢后 在進行服務端渲染
// 當用戶訪問了一個不存在的頁面，如何匹配到前端的路由
// 每次都能產生一個新的應用
}
// 當用戶訪問bar的時候：我在服務端直接進行了服務端渲染，渲染后的結果回傳給了瀏覽器， 瀏覽器加載js腳本，根據路徑加載js腳本，用重新渲染了bar
component.asyncData 是一個異步請求 等待請求結束后再 設定context.state = store.state; 此時 “window.INITIAL_STATE={“name”:“jiangwen”}”
客戶端的store就能拿到window.INITIAL_STATE 重新賦值，
5、定義服務端檔案 server.js ， 用node部署的一個服務器，請求對應的模板檔案
用了koa、koa-router做請求處理
vue-server-renderer是服務端渲染必備包
koa-static 是處理靜態資源的請求 比如js等檔案
serverBundle 是打包后的js
template 是服務端入口打包后的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');
// 根據實體 創建一個渲染器 傳入打包后的js 和 傳入模板檔案
const render = VueServerRenderer.createBundleRenderer(serverBundle, {
template
})
// 請求到localhost:3000/ 根據請求url引數 -》 {url:ctx.url}，傳給serverBundle 則 會根據服務端的打包的.js 路由系統 渲染出一份有該路由完整dom解構的頁面
router.get('/', async (ctx) => {
console.log('跳轉')
ctx.body = await new Promise((resolve, reject) => {
render.renderToString({url:ctx.url},(err, html) => { // 如果想讓css生效 只能使用回呼的方式
if (err) reject(err);
resolve(html)
})
})
// const html = await render.renderToString(); // 生成字串
// console.log(html)
})
// 當用戶訪問一個不存在的路徑的服務端路徑 我就回傳給你首頁，你通過前端的js渲染的時候，會重新根據路徑渲染組件
// 只要用戶重繪就會像服務器發請求
router.get('/(.*)',async (ctx)=>{
console.log('跳轉')
ctx.body = await new Promise((resolve, reject) => {
render.renderToString({url:ctx.url},(err, html) => { // 通過服務端渲染 渲染后回傳
if (err && err.code == 404) resolve(`not found`);
console.log(html)
resolve(html)
})
})
})
// 當客戶端發送請求時會先去dist目錄下查找
app.use(static(path.resolve(__dirname,'dist'))); // 順序問題
app.use(router.routes());
// 保證先走自己定義的路由 在找靜態檔案
app.listen(3000);
5.1 請求到localhost:3000/ 根據請求url引數 -》 {url:ctx.url}，傳給serverBundle 則 會根據服務端的打包的.js 路由系統 渲染出一份有該路由完整dom解構的頁面
因為 / 對應的組件是Foo, 所以頁面展示Foo
網頁源代碼都是決議后的dom了 可以用于seo
5.2 如果請求了 http://localhost:3000/bar
那么就會走 /(.*)的路由
renderToString傳入url
就會走
server-entry.js檔案的默認函式 這個js也是一個vue包含了所有客戶端原本的邏輯 只不過是放在服務端操作 ，
url就是 /bar
根據路由 /bar 取出Bar組件
router跳到bar 此時頁面就會是bar組件了
同時執行asyncData函式 ， 可能會改寫store或者其他資料
然后記得賦值 context.state = store.state 就會在window加上store的state物件
window.INITIAL_STATE={“name”:“jiangwen”}
store.js記得重新處理下(window.INITIAL_STATE
store.replaceState(window.INITIAL_STATE) 就是把服務端的狀態放在客戶端
dist/server.html 打包后，引入了/client.bundle.js 所以要有koa-static去做靜態請求處理
<!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 執行命令 npm run run:all
"run:all": "concurrently \"npm run client:build\" \"npm run server:build\""
就是打包了客戶端和服務端的資源包 包含js html 等
然后把整個server.js也放在服務器
執行node server.js 就能啟動node服務器了
6.2 server.js里面指向的server.bundle.js和server.html指向 對應服務器檔案夾就行
命令解釋
client:dev 開發時用spa渲染模式開發， 不考慮ssr, client.bundle.js和 client.html是正常的spa部署時用到
run:all 服務端渲染模式 是客戶端、服務端都打包
服務端使用時 ，client.bundle.js在瀏覽器使用， server.bundle.js 在服務器使用，
7、總結
1、SSR 首先要有個node服務器 、還有配合vue-server-renderer包使用，
2、正常的vue開發即可，考慮beforeMount 或 mounted生命周期不能在服務器端使用就行，
3、創建server.js 集合koa或者express 做請求決議 然后傳入 serverBundle和template給VueServerRenderer.createBundleRenderer函式
得到一個render
4、render.renderToString傳入請求的路由 比如 /bar
5、此時會進入serverBundle默認函式（server-entry.js打包得出的），創建一個vue實體app， 分析路由 vue實體然后跳轉路由，此時都是服務端的vue實體的變動而已，還沒反應到頁面
6、執行對應組件的asyncData函式， 可能會改變store.state 那么在 context.state賦值就行
7、resolve(app) 此時 server.js里面的render根據此時的vue實體app的路由狀態決議出dom， 回傳給頁面 ctx.body = …resolve(html);
8、此時頁面拿到正常路由匹配后的dom結構
9、html里面會有window.INITIAL_STATE={“name”:“zhufeng”} 相當于記錄了服務端的store狀態
10、客戶端執行到store時 其實沒有服務端那些改變后的狀態的 ，執行 store.replaceState(window.INITIAL_STATE); 就能替換了服務端的狀態
11、整體就是服務端客戶端都有一個js包， 提前在服務端跑js包 ，然后決議出dom, dom展現，服務端就結束了，剩下的邏輯交給客戶端的js去處理，
概念圖
官網：
- vue-server-renderer 和 vue 必須匹配版本，
- vue-server-renderer 依賴一些 Node.js 原生模塊，因此只能在 Node.js 中使用，我們可能會提供一個更簡單的構建，可以在將來在其他「JavaScript 運行時(runtime)」運行，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/281653.html
標籤：其他