Vue 服務端渲染（SSR）
Vue 服務端渲染（SSR）
什麼是服務端渲染，簡單理解是將組件或頁面經過服務器生成html字符串，再發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。 於傳統的SPA（單頁應用）相比，服務端渲染能更好的有利於SEO，減小頁面首屏加載時間，固然對開發來說咱們就不得很少學一些知識來支持服務端渲染。同時服務端渲染對服務器的壓力也是相對較大的，和服務器簡單輸出靜態文件相比，經過node去渲染出頁面再傳遞給客戶端顯然開銷是比較大的，須要注意準備好相應的服務器負載。javascript
1、一個簡單的例子
// 第 1 步：建立一個 Vue 實例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：將 Vue 實例渲染爲 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
複製代碼
上面例子利用 vue-server-renderer npm 包將一個vue示例最後渲染出了一段 html。將這段html發送給客戶端就輕鬆的實現了服務器渲染了。css
const server = require('express')()
server.get('*', (req, res) => {
// ... 生成 html
res.end(html)
})
server.listen(8080)
複製代碼
2、官方渲染步驟
上面例子雖然簡單，但在實際項目中每每還須要考慮到路由，數據，組件化等等，因此服務端渲染不是隻用一個 vue-server-renderer npm包就能輕鬆搞定的，下面給出一張Vue官方的服務器渲染示意圖：html
流程圖大體意思是：將 Source（源碼）經過 webpack 打包出兩個 bundle，其中 Server Bundle 是給服務端用的，服務端經過渲染器 bundleRenderer 將 bundle 生成 html 給瀏覽器用；另外一個 Client Bundle 是給瀏覽器用的，別忘了服務端只是生成前期首屏頁面所需的 html ，後期的交互和數據處理仍是須要能支持瀏覽器腳本的 Client Bundle 來完成。vue
3、具體怎麼實現
實現過程就是將上面的示意圖轉化成代碼實現，不過這個過程仍是有點小複雜的，須要多點耐心去推敲每一個細節。java
一、先實現一個基本版
項目結構示例：node
├── build
│ ├── webpack.base.config.js # 基本配置文件
│ ├── webpack.client.config.js # 客戶端配置文件
│ ├── webpack.server.config.js # 服務端配置文件
└── src
├── router
│ └── index.js # 路由
└── views
│ ├── comp1.vue # 組件
│ └── copm2.vue # 組件
├── App.vue # 頂級 vue 組件
├── app.js # app 入口文件
├── client-entry.js # client 的入口文件
├── index.template.html # html 模板
├── server-entry.js # server 的入口文件
├── server.js # server 服務
複製代碼
其中：webpack
（1）、comp1.vue 和 copm2.vue 組件
<template>
<section>組件 1</section>
</template>
<script>
export default {
data () {
return {
msg: ''
}
}
}
</script>
複製代碼
（2）、App.vue 頂級 vue 組件
<template>
<div id="app">
<h1>vue-ssr</h1>
<router-link class="link" to="/comp1">to comp1</router-link>
<router-link class="link" to="/comp2">to comp2</router-link>
<router-view class="view"></router-view>
</div>
</template>
<style lang="stylus">
.link
margin 10px
</style>
複製代碼
（3）、index.template.html html 模板
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>{{ title }}</title>
<meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
<meta name="theme-color" content="#f60"/>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
複製代碼
（4）、上面基礎代碼不解釋，接下來看
路由 routergit
import Vue from 'vue'
import Router from 'vue-router'
import comp1 from '../views/comp1.vue'
import comp2 from '../views/comp2.vue'
Vue.use(Router)
export function createRouter () {
return new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/comp1',
component: comp1
},
{
path: '/comp2',
component: comp2
},
{ path: '/', redirect: '/comp1' }
]
})
}
複製代碼
app.js app 入口文件es6
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
export function createApp (ssrContext) {
const router = createRouter()
const app = new Vue({
router,
ssrContext,
render: h => h(App)
})
return { app, router }
}
複製代碼
咱們經過 createApp 暴露一個根 Vue 實例，這是爲了確保每一個用戶能獲得一份新的實例，避免狀態污染，因此咱們寫了一個 能夠重複執行的工廠函數 createApp。 一樣路由 router 咱們也是同樣的處理方式 createRouter 來暴露一個 router 實例github
（5）client-entry.js client 的入口文件
import { createApp } from './app'
const { app, router } = createApp()
router.onReady(() => {
app.$mount('#app')
})
複製代碼
客戶端代碼是在路由解析完成的時候講 app 掛載到 #app 標籤下
（7）server-entry.js server 的入口文件
import { createApp } from './app'
export default context => {
// 由於這邊 router.onReady 是異步的，因此咱們返回一個 Promise
// 確保路由或組件準備就緒
return new Promise((resolve, reject) => {
const { app, router } = createApp(context)
router.push(context.url)
router.onReady(() => {
resolve(app)
}, reject)
})
}
複製代碼
服務器的入口文件咱們返回了一個 promise
二、打包
在第一步咱們大費周章實現了一個帶有路由的平常功能模板代碼，接着咱們須要利用webpack將上面的代碼打包出服務端和客戶端key的代碼，入口文件分別是 server-entry.js 和 client-entry.js
（1）、 webpack構建配置
通常配置分爲三個文件：base, client 和 server。基本配置(base config)包含在兩個環境共享的配置，例如，輸出路徑(output path)，別名(alias)和 loader。服務器配置(server config)和客戶端配置(client config)，能夠經過使用 webpack-merge 來簡單地擴展基本配置。
webpack.base.config.js 配置文件
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: '#cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
filename: '[name]-[chunkhash].js'
},
resolve: {
alias: {
'public': path.resolve(__dirname, '../public'),
'components': path.resolve(__dirname, '../src/components')
},
extensions: ['.js', '.vue']
},
module: {
noParse: /es6-promise\.js$/,
rules: [
{
test: /\.(js|vue)/,
use: 'eslint-loader',
enforce: 'pre',
exclude: /node_modules/
},
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
options: {
preserveWhitespace: false,
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
}
}
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.json/,
use: 'json-loader'
}
]
},
performance: {
maxEntrypointSize: 300000,
hints: 'warning'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
}),
new ExtractTextPlugin({
filename: 'common.[chunkhash].css'
})
]
}
複製代碼
webpack.client.config.js 配置文件
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const glob = require('glob')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const config = merge(base, {
entry: {
app: './src/client-entry.js'
},
resolve: {
alias: {
'create-api': './create-api-client.js'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"client"',
'process.env.DEBUG_API': '"true"'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return (
/node_modules/.test(module.context) && !/\.css$/.test(module.require)
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
// 這是將服務器的整個輸出
// 構建爲單個 JSON 文件的插件。
// 默認文件名爲 `vue-ssr-server-bundle.json`
new VueSSRClientPlugin()
]
})
module.exports = config
複製代碼
webpack.server.config.js 配置文件
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(base, {
target: 'node',
devtool: '#source-map',
entry: './src/server-entry.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
resolve: {
alias: {
'create-api': './create-api-server.js'
}
},
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"'
}),
new VueSSRServerPlugin()
]
})
複製代碼
webpack 配置完成，其實東西也很少，都是常規配置。須要注意的是 webpack.server.config.js 配置，output是生成一個 commonjs 的 library， VueSSRServerPlugin 用於這是將服務器的整個輸出構建爲單個 JSON 文件的插件。
（2）、 webpack build poj
build 代碼
webpack --config build/webpack.client.config.js
webpack --config build/webpack.server.config.js
複製代碼
打包後會生成一些打包文件，其中 server.config 打包後會生成 vue-ssr-server-bundle.json 文件，這個文件是給 createBundleRenderer 用的,用於服務端渲染出 html 文件
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', {
// ……renderer 的其餘選項
})
複製代碼
細心的你還會發現 client.config 不只生成了一下客服端用的到 js 文件，還會生成一份 vue-ssr-client-manifest.json 文件,這個文件是客戶端構建清單，服務端拿到這份構建清單找到一下用於初始化的js腳步或css注入到 html 一塊兒發給瀏覽器。
（3）、 服務端渲染
其實上面都是準備工做，最重要的一步是將webpack構建後的資源代碼給服務端用來生成 html 。咱們須要用node寫一個服務端應用，經過打包後的資源生成 html 併發送給瀏覽器
server.js
const fs = require('fs')
const path = require('path')
const Koa = require('koa')
const KoaRuoter = require('koa-router')
const serve = require('koa-static')
const { createBundleRenderer } = require('vue-server-renderer')
const LRU = require('lru-cache')
const resolve = file => path.resolve(__dirname, file)
const app = new Koa()
const router = new KoaRuoter()
const template = fs.readFileSync(resolve('./src/index.template.html'), 'utf-8')
function createRenderer (bundle, options) {
return createBundleRenderer(
bundle,
Object.assign(options, {
template,
cache: LRU({
max: 1000,
maxAge: 1000 * 60 * 15
}),
basedir: resolve('./dist'),
runInNewContext: false
})
)
}
let renderer
const bundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
renderer = createRenderer(bundle, {
clientManifest
})
/** * 渲染函數 * @param ctx * @param next * @returns {Promise} */
function render (ctx, next) {
ctx.set("Content-Type", "text/html")
return new Promise (function (resolve, reject) {
const handleError = err => {
if (err && err.code === 404) {
ctx.status = 404
ctx.body = '404 | Page Not Found'
} else {
ctx.status = 500
ctx.body = '500 | Internal Server Error'
console.error(`error during render : ${ctx.url}`)
console.error(err.stack)
}
resolve()
}
const context = {
title: 'Vue Ssr 2.3',
url: ctx.url
}
renderer.renderToString(context, (err, html) => {
if (err) {
return handleError(err)
}
console.log(html)
ctx.body = html
resolve()
})
})
}
app.use(serve('/dist', './dist', true))
app.use(serve('/public', './public', true))
router.get('*', render)
app.use(router.routes()).use(router.allowedMethods())
const port = process.env.PORT || 8089
app.listen(port, '0.0.0.0', () => {
console.log(`server started at localhost:${port}`)
})
複製代碼
這裏咱們用到了最開始 demo 用到的 vue-server-renderer npm 包，經過讀取 vue-ssr-server-bundle.json 和 vue-ssr-client-manifest.json 文件 renderer 出 html，最後 ctx.body = html 發送給瀏覽器, 咱們試着 console.log(html) 出 html 看看服務端到底渲染出了何方神聖：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>Vue Ssr 2.3</title>
<meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
<meta name="theme-color" content="#f60"/>
<link rel="preload" href="/dist/manifest-56dda86c1b6ac68c0279.js" as="script"><link rel="preload" href="/dist/vendor-3504d51340141c3804a1.js" as="script"><link rel="preload" href="/dist/app-ae1871b21fa142b507e8.js" as="script"><style data-vue-ssr-id="41a1d6f9:0"> .link { margin: 10px; } </style><style data-vue-ssr-id="7add03b4:0"></style></head>
<body>
<div id="app" data-server-rendered="true">
<h1>vue-ssr</h1>
<a href="/comp1" class="link router-link-exact-active router-link-active">to comp1</a>
<a href="/comp2" class="link">to comp2</a>
<section class="view">組件 1</section>
</div>
<script src="/dist/manifest-56dda86c1b6ac68c0279.js" defer> </script>
<script src="/dit/vendor-3504d51340141c3804a1.js" defer></script>
<script src="/dist/app-ae1871b21fa142b507e8.js" defer></script>
</body>
</html>
複製代碼
能夠看到服務端把路由下的 組件 1 也給渲染出來了，而不是讓客服端去動態加載，其次是 html 也被注入了一些 <script 標籤去加載對應的客戶端資源。這裏再多說一下，有的同窗可能不理解，服務端渲染不就是最後輸出 html 讓瀏覽器渲染嗎，怎麼 html 還帶 js 腳本，注意，服務端渲染出的 html 只是首次展現給用戶的頁面而已，用戶後期操做頁面處理數據仍是須要 js 腳本去跑的，也就是 webpack 爲何要打包出一套服務端代碼（用於渲染首次html用），一套客戶端代碼（用於後期交互和數據處理用）
4、小結
本篇簡單瞭解了 vue ssr 的簡單流程，上面例子的demo放在github 歡迎提 issue 和 star 。服務端渲染還有比較重要的一部分是首屏數據的獲取渲染，通常頁面展現都會有一些網絡數據初始化，服務端渲染能夠將這些數據獲取到插入到 html ，因爲這部分內容涉及到的知識點也很多，放在下次講。
2018-5-28 更新
評論區提到的bug已經修復，若是有其餘問題能夠到github對應的工程下提 issues，github 的 issues 有 markdown 格式，方便問題描述和討論，問題描述能夠儘可能清楚，方面做者排查問題緣由
2018-7-14 更新
解決 Unexpected token < 報錯問題
報錯緣由是 html 的 JavaScript 資源路徑錯誤致使
服務端渲染出的 html 帶有 script 標籤，對應到服務端請求的 .js 靜態資源路徑出錯了
<script src="/dist/manifest-56dda86c1b6ac68c0279.js" defer>
</script>
<script src="/dit/vendor-3504d51340141c3804a1.js" defer></script>
<script src="/dist/app-ae1871b21fa142b507e8.js" defer></script>
複製代碼
評論區有提到修改以下, 感謝指出錯誤 @wfz
//webpack.base.config.js 配置文件
output: {
- publicPath: '/dit/',
+ publicPath: '/',
},
複製代碼
//server.js
- app.use(serve('/dist', './dist', true))
- app.use(serve('/public', './public', true))
+ app.use(serve(__dirname + '/dist'))
複製代碼
對應 html 輸出
<script src="/manifest-56dda86c1b6ac68c0279.js" defer>
</script>
<script src="/vendor-3504d51340141c3804a1.js" defer></script>
<script src="/app-ae1871b21fa142b507e8.js" defer></script>
複製代碼
運行項目
npm run install
npm run build:client // 生成 clientBundle
npm run build:server // 生成 serverBundle
npm run dev // 啓動 node 渲染服務
複製代碼
open http://localhost:8089/
相關文章
- 1. Vue 服務端渲染（SSR）
- 2. SSR 服務器端渲染
- 3. 7、SSR（服務端渲染）
- 4. 實現 Vue 服務端渲染（Vue SSR）
- 5. 七、SSR（服務端渲染）
- 6. 服務端渲染（SSR)
- 7. 服務器端渲染SSR
- 8. vue ssr服務端渲染入門demo
- 9. vue SSR 服務端渲染記錄
- 10. vue服務器端渲染（SSR）實戰
- 更多相關文章...
- • 服務端腳本 指南 - 網站建設指南
- • XSLT - 在服務器端 - XSLT 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue 服務端渲染（SSR）
- 2. SSR 服務器端渲染
- 3. 7、SSR（服務端渲染）
- 4. 實現 Vue 服務端渲染（Vue SSR）
- 5. 七、SSR（服務端渲染）
- 6. 服務端渲染（SSR)
- 7. 服務器端渲染SSR
- 8. vue ssr服務端渲染入門demo
- 9. vue SSR 服務端渲染記錄
- 10. vue服務器端渲染（SSR）實戰