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的服务端渲染提供了强大且灵活的解决方案，通过正确配置可以显著提升应用的性能和用户体验。
)
)
)
