Nuxt渲染模式全解：水合是啥？SSR/CSR/混合/边缘模式选择

1
<!-- pages/blog/[slug].vue 博客文章页 -->
2
<template>
3
  <div class="blog-post">
4
    <!-- 服务器渲染的静态内容：标题、作者、内容 -->
5
    <h1>{{ post.title }}</h1>
6
    <p class="meta">作者：{{ post.author }} | 发布时间：{{ post.time }}</p>
7
    <div
8
      class="content"
9
      v-html="post.content"
10
    ></div>
11

12
    <!-- 客户端交互：点赞按钮 -->
13
    <button
14
      @click="like"
15
      :class="{ liked: isLiked }">
16
      {{ isLiked ? '已点赞' : '点赞' }} ({{ post.likes }})
17
    </button>
18
  </div>
19
</template>
20

21
<script setup lang="ts">
22
import { useAsyncData, useRoute } from 'nuxt/app'
23
import { ref } from 'vue'
24

25
const route = useRoute()
26
const slug = route.params.slug as string // 获取文章slug（如“nuxt-rendering-mode”）
27

28
// 1. 服务器端预取文章数据（SSR核心：数据同步）
29
// useAsyncData会缓存数据，客户端不用重复请求
30
const { data: post } = await useAsyncData(`blog-${slug}`, async () => {
31
  const res = await fetch(`https://api.yourblog.com/posts/${slug}`)
32
  return res.json() // 返回文章数据（服务器端执行）
33
})
34

35
// 2. 客户端交互状态（仅客户端执行）
36
const isLiked = ref(false) // 记录是否点赞
37

38
const like = () => {
39
  if (isLiked.value) return // 防止重复点击
40
  isLiked.value = true
41
  post.value.likes++ // 响应式更新点赞数（仅客户端）
42
  // 这里可以加调用后端API的逻辑，比如上报点赞数
43
}
44
</script>

1
// nuxt.config.ts 电商网站的混合渲染配置
2
export default defineNuxtConfig({
3
  routeRules: {
4
    // 1. 首页：Prerender（build时静态生成）
5
    // 适合访问量高、内容稳定的页面（比如轮播图、推荐商品）
6
    '/': { prerender: true },
7

8
    // 2. 商品列表页：SWR（缓存1小时）
9
    // 缓存1小时，过期后后台刷新，用户看不到延迟（适合动态但更新不频繁的内容）
10
    '/products/**': { swr: 3600 },
11

12
    // 3. 商品详情页：SSR（实时渲染）
13
    // 需要实时数据（比如库存、价格），同时SEO友好
14
    '/product/**': { ssr: true },
15

16
    // 4. 用户中心：CSR（客户端渲染）
17
    // 动态内容（比如订单、收藏），不需要SEO，关闭SSR减少服务器压力
18
    '/user/**': { ssr: false },
19

20
    // 5. 旧链接重定向：301到新链接
21
    // 处理历史链接（比如/old-product/123 → /product/123）
22
    '/old-product/**': { redirect: '/product' },
23
  },
24
})