來源：qiuzhx時間：2019-09-18
服務端渲染的模式就是：就是將本來要放在瀏覽器執行創建的組件，放到服務端先創建好，然后生成對應的html，在請求一個網址的時候，服務端收到請求之后把html的內容先生成好然后再返回給瀏覽器。這樣子搜索引擎就可以通過你返回的a標簽抓取到網站的其他頁面了，最后將這些靜態標記"激活"為客戶端上完全可交互的應用程序
Vue SSR 相比 SPA（單頁應用）好處及壞處
好處
更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
更快的內容到達時間(time-to-content)，特別是對于緩慢的網絡情況或運行緩慢的設備。
壞處
開發條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(lifecycle hook)中使用；一些外部擴展庫(external library)可能需要特殊處理，才能在服務器渲染應用程序中運行。
涉及構建設置和部署的更多要求。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序(SPA)不同，服務器渲染應用程序，需要處于 Node.js server 運行環境。
更多的服務器端負載。在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量占用 CPU 資源(CPU-intensive - CPU 密集)，因此如果你預料在高流量環境(high traffic)下使用，請準備相應的服務器負載，并明智地采用緩存策略。
SSR原理
這是vue.js官方的SSR原理介紹圖，從這張圖片，我們可以知道：我們需要通過Webpack打包生成兩份bundle文件：
Client Bundle，給瀏覽器用。和純Vue前端項目Bundle類似
Server Bundle，供服務端SSR使用，一個json文件
不管你項目先前是什么樣子，是否是使用vue-cli生成的。都會有這個構建改造過程。在構建改造這里會用到 vue-server-renderer 庫，這里要注意的是 vue-server-renderer 版本要與Vue版本一樣。
Vue SSR實例（構建基于vue-cli3 的SSR應用程序）
創建一個vue項目
vue create ssr-example
............這里就i不再過多的說明了，就正常的創建一個vue項目的流程
進行SSR改造—安裝需要的包
安裝 vue-server-renderer
安裝 lodash.merge
安裝 webpack-node-externals
安裝 cross-env
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --save-dev
進行SSR改造—在服務器中集成
安裝koa2，然后在項目根目錄下新建一個server.js
npm install koa koa-static --save
進行SSR改造—在koa2集成ssr
源碼:
----------------------------------------------------------------------------------
// 第 1 步：創建一個 Vue 實例
const Vue = require('vue')
const Koa = require('koa')
const app = new Koa()
// 第 2 步：創建一個 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：添加一個中間件來處理所有請求
app.use(async (ctx, next) => {
const vm = new Vue({
data: {
title: "ssr example",
url: ctx.url
},
template: `<div>訪問的 URL 是： {{ url }}</div>`
})
// 將 Vue 實例渲染為 HTML
renderer.renderToString(vm, (err, html) => {
if(err){
res.status(500).end('Internal Server Error')
return
}
ctx.body = html
})
})
const port = 3000
app.listen(port, function() {
console.log(`server started at localhost:${port}`)
})
--------------------------------------------------------------------------------------
看到這個說明一個簡單的ssr構建成功了。
不過到目前為止，我們并沒有將客戶端的.vue文件通過服務端進行渲染，那么如何將前端的.vue文件與后端node進行結合呢？
進行SSR改造—改造前端配置，以支持SSR
修改源碼結構
在src目錄下新建兩個文件，一個entry-client.js 僅運行于瀏覽器 一個entry-server.js 僅運行于服務器
修改main.js
main.js 是我們應用程序的「通用 entry」。在純客戶端應用程序中，我們將在此文件中創建根 Vue 實例，并直接掛載到 DOM。但是，對于服務器端渲染(SSR)，責任轉移到純客戶端 entry 文件。app.js 簡單地使用 export 導出一個 createApp 函數：
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from "./router"
import store from './store'
Vue.config.productionTip = false
// 導出一個工廠函數，用于創建新的
// 應用程序、router 和 store 實例
export function createApp () {
const router = createRouter()
const app = new Vue({
router,
store,
// 根實例簡單的渲染應用程序組件。
render: h => h(App)
})
return { app }
}
修改entry-client.js
客戶端 entry 只需創建應用程序，并且將其掛載到 DOM 中
import { createApp } from './main'
// 客戶端特定引導邏輯……
const { app } = createApp()
// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
修改entry-server.js
服務器 entry 使用 default export 導出函數，并在每次渲染中重復調用此函數。
import { createApp } from './main'
export default context => {
// 因為有可能會是異步路由鉤子函數或組件，所以我們將返回一個 Promise，
// 以便服務器能夠等待所有的內容在渲染前，
// 就已經準備就緒。
return new Promise((resolve, reject) => {
const { app, router, store } = createApp()
// 設置服務器端 router 的位置
router.push(context.url)
// 等到 router 將可能的異步組件和鉤子函數解析完
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
// 匹配不到的路由，執行 reject 函數，并返回 404
if (!matchedComponents.length) {
return reject({
code: 404
})
}
// Promise 應該 resolve 應用程序實例，以便它可以渲染
resolve(app)
}, reject)
})
}
修改router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history', // 一定要是history模式
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
修改webpack配置
在vue-cli3創建的vue項目，已經沒有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何進行webpack的配置呢？
在vue-cli官網上也說明了如何使用。 調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象，該對象將會被 webpack-merge 合并入最終的 webpack 配置。
在項目根目錄下，新建一個vue.config.js
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")
const TARGET_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGET_NODE ? "server" : "client"
module.exports = {
configureWebpack: () => ({
// 將 entry 指向應用程序的 server / client 文件
entry: `./src/entry-${target}.js`,
// 對 bundle renderer 提供 source map 支持
devtool: 'source-map',
target: TARGET_NODE ? "node" : "web",
node: TARGET_NODE ? undefined : false,
output: {
libraryTarget: TARGET_NODE ? "commonjs2" : undefined
},
// https://webpack.js.org/configuration/externals/#function
// https://github.com/liady/webpack-node-externals
// 外置化應用程序依賴模塊?？梢允狗掌鳂嫿ㄋ俣雀欤?br />
// 并生成較小的 bundle 文件。
externals: nodeExternals({
// 不要外置化 webpack 需要處理的依賴模塊。
// 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
// 你還應該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
whitelist: [/.css$/]
}),
optimization: {
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3
}
},
plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}),
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-loader")
.tap(options => {
merge(options, {
optimizeSSR: false
})
})
}
}
修改package，在scripts下面新增三個腳本來生成bundle.json
"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
"build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
執行命令
npm run build:win
在dist目錄下會生成兩個json文件
改造server.js 代碼
const fs = require('fs')
const Koa = require('koa')
const path = require('path')
const koaStatic = require('koa-static')
const app = new Koa()
const resolve = file => path.resolve(__dirname, file)
// 開放dist目錄
app.use(koaStatic(resolve('./dist')))
// 第 2 步：獲得一個createBundleRenderer
const { createBundleRenderer } = require('vue-server-renderer')
const bundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(bundle, {
runInNewContext: false,
template: fs.readFileSync(resolve('./src/index.temp.html'), 'utf-8'),
clientManifest: clientManifest
})
function renderToString(context) {
return new Promise((resolve, reject) => {
renderer.renderToString(context, (err, html) => {
err ? reject(err) : resolve(html)
})
})
}
// 第 3 步：添加一個中間件來處理所有請求
app.use(async (ctx, next) => {
const context = {
title: 'ssr test',
url: ctx.url
}
// 將 context 數據渲染為 HTML
const html = await renderToString(context)
ctx.body = html
})
const port = 3000
app.listen(port, function() {
console.log(`server started at localhost:${port}`)
})
運行server.js
node server.js
訪問 localhost:3000，可以看到頁面的數據都是又服務端渲染完成后返回的。到這一步已經基本算完成了SSR的構建了。
如果有問題的話，可以把dist目錄下的index.html文件刪了。避免直接訪問到了該html文件
恩尼斯網站開發定制網站轉載
下一篇：如何自行搭建個人網站
粵公網安備 44010602005325號