Vue 3 服务端渲染(SSR)教程
Vue 3 服务端渲染(SSR)教程
目录
- 什么是服务端渲染(SSR)
- 为什么选择Vue 3的SSR
- 准备开发环境
- 基础SSR项目搭建
- SSR渲染流程详解
- 高级SSR技巧
- 性能优化
- 常见问题解答
1. 什么是服务端渲染(SSR)
服务端渲染(Server-Side Rendering, SSR)是一种在服务器端生成完整HTML页面，然后将渲染好的页面直接发送给客户端的技术。相比传统的客户端渲染，SSR具有以下优势：
- 更好的首屏加载性能
- 改善SEO
- 提高网站的可访问性
- 减少客户端JavaScript的初始负载
2. 为什么选择Vue 3的SSR
Vue 3通过@vue/server-renderer和vue-router提供了强大的SSR支持，让开发者能够轻松构建高性能的服务端渲染应用。
3. 准备开发环境
首先，我们需要安装必要的依赖：
# 创建项目目录
mkdir vue3-ssr-demo
cd vue3-ssr-demo
# 初始化项目
npm init -y
# 安装核心依赖
npm install vue@next vue-router@4 @vue/server-renderer express
npm install -D @vitejs/plugin-vue vite webpack webpack-cli
4. 基础SSR项目搭建
项目结构
vue3-ssr-demo/
├── src/
│ ├── App.vue
│ ├── main.js
│ ├── entry-client.js
│ └── entry-server.js
├── server.js
└── vite.config.js
核心代码实现
App.vue
<template>
<div id="app">
<h1>Vue 3 SSR Demo</h1>
<router-view></router-view>
</div>
</template>
<script setup>
// 应用级逻辑
</script>
main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import { createRouter } from './router'
export function createApp() {
const app = createSSRApp(App)
const router = createRouter()
app.use(router)
return { app, router }
}
entry-client.js
import { createApp } from './main'
const { app, router } = createApp()
router.isReady().then(() => {
app.mount('#app')
})
entry-server.js
import { createApp } from './main'
export async function renderApp(url) {
const { app, router } = createApp()
router.push(url)
await router.isReady()
return app
}
server.js
import express from 'express'
import { renderToString } from '@vue/server-renderer'
import { renderApp } from './dist/entry-server.js'
const server = express()
server.use(express.static('dist'))
server.get('*', async (req, res) => {
const app = await renderApp(req.url)
const html = await renderToString(app)
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 SSR</title>
</head>
<body>
<div id="app">${html}</div>
<script src="/entry-client.js"></script>
</body>
</html>
`)
})
server.listen(3000, () => {
console.log('SSR Server running on port 3000')
})
5. SSR渲染流程详解
SSR渲染主要包括以下步骤：
- 服务器接收请求
- 创建Vue应用实例
- 使用
vue-router匹配路由 - 服务端渲染组件为HTML字符串
- 将渲染结果发送到客户端
- 客户端hydration激活交互
6. 高级SSR技巧
状态管理
对于复杂的状态管理，可以使用Pinia，并在服务端正确初始化状态。
数据预取
在服务端渲染前预取数据，确保首屏加载完整：
async function serverDataFetch(route) {
// 根据路由获取数据
}
7. 性能优化
- 使用代码分割
- 缓存服务端渲染结果
- 启用压缩
- 使用HTTP/2
结语
Vue 3的服务端渲染提供了强大且灵活的解决方案，通过正确配置可以显著提升应用的性能和用户体验。