第12章 服务端渲染（SSR）深度解析
12.1 SSR核心价值详解
12.1.1 与传统SPA的对比分析
步骤
步骤
客户端渲染CSR
1. 下载空HTML
2. 下载JS文件
3. 执行JS渲染页面
服务端渲染SSR
1. 服务端生成完整HTML
2. 立即展示内容
3. 下载JS进行混合
核心优势对比表：
| 特性 | CSR | SSR |
|---|---|---|
| 首屏时间 | 依赖JS下载执行（慢） | 立即展示HTML（快） |
| SEO支持 | 需动态渲染（可能不被抓取） | 完整HTML（SEO友好） |
| 服务器负载 | 低（纯静态资源） | 高（需实时渲染） |
| 开发复杂度 | 低 | 高（需同构代码） |
| 用户体验 | 首次加载白屏 | 快速首屏+渐进增强 |
12.2 SSR实现原理深度剖析
12.2.1 同构应用架构设计
代码结构示例
src/
├── components/ # 通用组件
├── router/ # 路由（需同构）
├── store/ # Vuex store（需同构）
├── App.vue # 根组件
├── app.js # 通用入口
├── entry-client.js # 客户端入口
└── entry-server.js # 服务端入口
通用入口文件（app.js）
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'
export function createApp () {
const router = createRouter()
const store = createStore()
const app = new Vue({
router,
store,
render: h => h(App)
})
return { app, router, store }
}
12.2.2 双端入口实现
客户端入口（entry-client.js）
import { createApp } from './app'
const { app, router, store } = createApp()
// 客户端混合（Hydration）
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}
router.onReady(() => {
app.$mount('#app')
})
服务端入口（entry-server.js）
import { createApp } from './app'
export default context => {
return new Promise((resolve, reject) => {
const { app, router, store } = createApp()
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
if (!matchedComponents.length) {
return reject({ code: 404 })
}
// 执行组件数据预取
Promise.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({ store, route: router.currentRoute })
}
})).then(() => {
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}
12.3 服务端渲染核心流程
12.3.1 完整渲染流程
Client Server VueApp DataSource 发起页面请求 创建Vue实例 执行数据预取（asyncData） 返回数据 生成HTML 返回完整HTML + 初始状态 执行混合（Hydration） 绑定交互事件 Client Server VueApp DataSource
12.3.2 服务端渲染函数实现
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
// HTML模板示例
<!-- index.template.html -->
<html>
<head>
<!-- 使用双花括号插值 -->
<title>{{ title }}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
// 服务端处理逻辑
server.get('*', async (req, res) => {
const context = {
url: req.url,
title: 'SSR Demo'
}
try {
const app = await createApp(context)
const html = await renderer.renderToString(app, context)
res.send(html)
} catch (err) {
if (err.code === 404) {
res.status(404).end('Page not found')
} else {
res.status(500).end('Internal Server Error')
}
}
})
12.4 关键问题解决方案
12.4.1 数据预取与状态同步
组件数据预取
// 组件定义
export default {
name: 'PostList',
asyncData({ store, route }) {
return store.dispatch('fetchPosts', {
page: route.query.page || 1
})
},
computed: {
posts() {
return this.$store.state.posts
}
}
}
服务端数据注入
// 在服务端渲染完成后
context.state = store.state
// 模板中的状态注入
<script>
window.__INITIAL_STATE__ = {{{ state }}}
</script>
// 注意：需要序列化处理防止XSS
const serialize = require('serialize-javascript')
const state = serialize(context.state, { isJSON: true })
12.4.2 客户端混合（Hydration）原理
// 客户端初始化
const store = new Vuex.Store({
state: window.__INITIAL_STATE__
})
const app = new Vue({
store,
router,
render: h => h(App)
})
// Hydration核心过程
app.$mount('#app', true) // 第二个参数为hydrating标志
// Vue内部处理逻辑（简化版）
function mountComponent() {
if (vm.$vnode == null) {
// 服务端渲染模式
vm.$el = document.getElementById('app')
vm.$el.__vue__ = vm
return
}
// ...正常挂载逻辑
}
12.5 高级优化策略
12.5.1 组件级缓存
const LRU = require('lru-cache')
const componentCache = new LRU({
max: 1000,
maxAge: 1000 * 60 * 15 // 15分钟
})
// 服务端渲染配置
const renderer = createBundleRenderer(serverBundle, {
cache: {
get: key => componentCache.get(key),
set: (key, val) => componentCache.set(key, val)
}
})
// 组件声明缓存
export default {
name: 'HeavyComponent',
serverCacheKey: props => props.id, // 自定义缓存key
props: ['id']
}
12.5.2 流式渲染优化
// 服务端流式处理
server.get('*', (req, res) => {
const context = { url: req.url }
renderer.renderToStream(context)
.on('error', err => {
handleError(err)
})
.on('end', () => {
console.log('Render complete')
})
.pipe(res)
})
// 客户端渐进式混合
let hasHydrated = false
function hydrateWhenVisible() {
if (hasHydrated) return
if (elementIsVisible(appContainer)) {
app.$mount()
hasHydrated = true
} else {
requestIdleFrame(hydrateWhenVisible)
}
}
12.6 错误处理与调试
12.6.1 错误边界处理
// 全局错误处理组件
Vue.component('ErrorBoundary', {
data: () => ({ error: null }),
errorCaptured(err, vm, info) {
this.error = err
// 服务端错误处理
if (process.server) {
server.handleError(err)
}
return false
},
render(h) {
return this.error ? h('div', 'Error occurred') : this.$slots.default[0]
}
})
12.6.2 调试技巧
// 查看服务端生成的VNode树
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
template,
clientManifest,
inject: false,
shouldPrefetch: () => false,
shouldPreload: (file, type) => {
console.log(`Preload: ${file} (${type})`)
return false
}
})
// 使用VS Code调试配置
{
"type": "node",
"request": "launch",
"name": "Debug SSR",
"runtimeExecutable": "node",
"runtimeArgs": [
"--inspect",
"./server.js"
],
"port": 9229
}
12.7 完整项目配置示例
12.7.1 Webpack配置
// webpack.server.config.js
module.exports = {
target: 'node',
entry: './src/entry-server.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
externals: nodeExternals(),
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
// webpack.client.config.js
module.exports = {
entry: './src/entry-client.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'client-bundle.js',
publicPath: '/dist/'
},
plugins: [
new VueSSRClientPlugin()
]
}
12.7.2 Express服务器配置
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/server-bundle.json')
const clientManifest = require('./dist/client-manifest.json')
const template = require('fs').readFileSync('./index.template.html', 'utf-8')
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
template,
clientManifest
})
const app = express()
app.use('/dist', express.static('dist'))
app.get('*', (req, res) => {
const context = { url: req.url }
renderer.renderToString(context, (err, html) => {
if (err) {
if (err.code === 404) {
res.status(404).end('Not found')
} else {
res.status(500).end('Internal Error')
}
} else {
res.end(html)
}
})
})
app.listen(8080)
本章重点总结：
- 同构架构：客户端与服务端代码共享的核心设计
- 数据预取：服务端异步数据获取与状态同步机制
- 混合过程：客户端激活（hydration）的底层原理
- 性能优化：缓存策略与流式渲染的实践方法
- 错误处理：全链路错误捕获与调试技巧
最佳实践建议：
- 使用
vue-server-renderer的clientManifest优化资源加载 - 为高流量页面实施组件级缓存
- 使用
serialize-javascript防止XSS攻击 - 通过
process.server标识区分运行环境 - 使用
vue-meta管理服务端头部信息
// 使用vue-meta示例
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
ssrAppId: 'ssr-app-id',
attribute: 'data-vue-meta',
tagIDKeyName: 'vmid'
})
// 服务端渲染时注入
const meta = app.$meta()
context.meta = meta
// 在模板中使用{{{ meta.inject().title.text() }}}