Vue 3 服务端渲染(SSR)教程

1. 什么是服务端渲染(SSR)

服务端渲染(Server-Side Rendering, SSR)是一种在服务器端生成完整HTML页面，然后将渲染好的页面直接发送给客户端的技术。相比传统的客户端渲染，SSR具有以下优势：

更好的首屏加载性能
改善SEO
提高网站的可访问性
减少客户端JavaScript的初始负载

2. 为什么选择Vue 3的SSR

Vue 3通过@vue/server-renderer和vue-router提供了强大的SSR支持，让开发者能够轻松构建高性能的服务端渲染应用。

3. 准备开发环境

首先，我们需要安装必要的依赖：

bash 复制代码

# 创建项目目录
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

vue 复制代码

<template>
  <div id="app">
    <h1>Vue 3 SSR Demo</h1>
    <router-view></router-view>
  </div>
</template>

<script setup>
// 应用级逻辑
</script>

main.js

javascript 复制代码

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

javascript 复制代码

import { createApp } from './main'

const { app, router } = createApp()

router.isReady().then(() => {
  app.mount('#app')
})

entry-server.js

javascript 复制代码

import { createApp } from './main'

export async function renderApp(url) {
  const { app, router } = createApp()
  
  router.push(url)
  await router.isReady()
  
  return app
}

server.js

javascript 复制代码

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，并在服务端正确初始化状态。

数据预取

在服务端渲染前预取数据，确保首屏加载完整：

javascript 复制代码

async function serverDataFetch(route) {
  // 根据路由获取数据
}

7. 性能优化

使用代码分割
缓存服务端渲染结果
启用压缩
使用HTTP/2

结语

Vue 3的服务端渲染提供了强大且灵活的解决方案，通过正确配置可以显著提升应用的性能和用户体验。