流式渲染 Streaming SSR

// nuxt.config.ts
export default defineNuxtConfig({
  // 流式 SSR 默认开启，无需额外配置
  // 但需要确保部署平台支持流式响应（Node.js 服务器、Cloudflare Workers 等）
})

<template>
  <div>
    <!-- 视频详情：快速加载，立即渲染 -->
    <VideoHeader :video="video" />
 
    <!-- 推荐列表：独立 Suspense 边界 -->
    <Suspense>
      <LazyVideoRecommendations :video-id="video.id" />
      <template #fallback>
        <div class="grid grid-cols-4 gap-4">
          <div v-for="i in 4" :key="i" class="aspect-video bg-gray-200 animate-pulse rounded" />
        </div>
      </template>
    </Suspense>
 
    <!-- 评论区：独立 Suspense 边界 -->
    <Suspense>
      <LazyVideoComments :video-id="video.id" />
      <template #fallback>
        <div class="space-y-4">
          <div v-for="i in 3" :key="i" class="h-20 bg-gray-200 animate-pulse rounded" />
        </div>
      </template>
    </Suspense>
  </div>
</template>

// 默认模式：阻塞渲染，等数据好了再发送 HTML
const { data: video } = await useFetch(`/api/videos/${id}`)
 
// lazy 模式：不阻塞渲染，先发送 loading 状态
const { data: comments, pending } = await useFetch(`/api/videos/${id}/comments`, {
  lazy: true,
})

// 视频详情：关键数据，阻塞等待（SEO 需要）
const { data: video } = await useFetch(`/api/videos/${id}`)
 
// 推荐列表：非关键，lazy 加载
const { data: recommendations, pending: recPending } = await useFetch(
  `/api/videos/${id}/recommendations`,
  { lazy: true }
)
 
// 评论列表：非关键，lazy 加载
const { data: comments, pending: commentsPending } = await useFetch(
  `/api/videos/${id}/comments`,
  { lazy: true }
)

// 这两行等价
const { data } = await useFetch('/api/data', { lazy: true })
const { data } = await useLazyFetch('/api/data')

<Suspense>
  <LazyVideoComments :video-id="video.id" />
  <template #fallback>
    <div class="animate-pulse">加载评论中...</div>
  </template>
</Suspense>
 
<!-- 如果评论加载失败，组件内部处理 -->
<!-- VideoComments.vue -->
<template>
  <div v-if="error" class="text-red-500">
    评论加载失败，<button @click="refresh">重试</button>
  </div>
  <div v-else>{{ data }}</div>
</template>

<!-- pages/videos/[id].vue -->
<template>
  <div class="max-w-[1400px] mx-auto">
    <!-- 第一个 chunk：立即发送 -->
    <VideoPlayer :video="video" />
    <VideoMeta :video="video" :author="author" />
 
    <div class="grid grid-cols-3 gap-8 mt-8">
      <div class="col-span-2">
        <!-- 第三个 chunk：评论准备好后发送 -->
        <Suspense>
          <LazyVideoComments :video-id="video.id" />
          <template #fallback>
            <CommentsSkeleton />
          </template>
        </Suspense>
      </div>
 
      <div>
        <!-- 第二个 chunk：推荐准备好后发送 -->
        <Suspense>
          <LazyVideoRecommendations :video-id="video.id" />
          <template #fallback>
            <RecommendationsSkeleton />
          </template>
        </Suspense>
      </div>
    </div>
  </div>
</template>
 
<script setup>
const route = useRoute()
const id = route.params.id
 
// 关键数据：阻塞等待
const [{ data: video }, { data: author }] = await Promise.all([
  useFetch(`/api/videos/${id}`),
  useFetch(`/api/videos/${id}/author`),
])
 
if (!video.value) throw createError({ statusCode: 404, message: '视频不存在' })
</script>

// 两者结合
export default defineNuxtConfig({
  routeRules: {
    '/videos/**': { isr: 3600 },  // 缓存 1 小时
    // 缓存未命中时，流式 SSR 自动生效
  },
})