SSG 静态站点生成与预渲染

# 生成静态站点
npx nuxi generate
 
# 等价于
npx nuxi build --prerender

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 指定路由在构建时预渲染
    '/': { prerender: true },
    '/about': { prerender: true },
    '/pricing': { prerender: true },
    '/blog/**': { prerender: true },    // 通配符：所有博客页面
 
    // 排除某些路由不预渲染
    '/studio/**': { prerender: false },  // 工作台不需要预渲染
    '/admin/**': { prerender: false },   // 管理后台不需要预渲染
  },
})

<!-- app/pages/about.vue -->
<script setup lang="ts">
defineRouteRules({
  prerender: true,  // 构建时预渲染此页面
})
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // 入口路由（爬虫从这些页面开始）
      routes: ['/', '/sitemap.xml'],
 
      // 额外爬取这些路由
      crawlLinks: true,  // 自动发现 <a> 链接
 
      // 忽略某些路由
      ignore: [
        '/api/**',        // 不预渲染 API 路由
        '/studio/**',     // 不预渲染工作台
      ],
 
      // 并发数（加快构建速度）
      concurrency: 10,
 
      // 失败时不中断构建
      failOnError: false,
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/',
        '/videos/abc123',
        '/videos/def456',
        '/videos/ghi789',
      ],
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'prerender:routes'(ctx) {
      // 从 API 获取所有视频 ID
      const videos = await fetch('https://api.example.com/videos?fields=id')
        .then(res => res.json())
 
      // 添加到预渲染列表
      for (const video of videos) {
        ctx.routes.add(`/videos/${video.id}`)
      }
 
      // 从 CMS 获取所有博客文章
      const posts = await fetch('https://cms.example.com/posts?fields=slug')
        .then(res => res.json())
 
      for (const post of posts) {
        ctx.routes.add(`/blog/${post.slug}`)
      }
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  site: { url: 'https://aivideo.example.com' },
  sitemap: {
    // 动态路由通过 API 获取
    sources: ['/api/__sitemap__/urls'],
  },
})

// server/api/__sitemap__/urls.ts
export default defineSitemapEventHandler(async () => {
  const videos = await fetchVideoList()
  return videos.map(v => ({
    loc: `/videos/${v.id}`,
    lastmod: v.updatedAt,
    changefreq: 'weekly',
    priority: 0.8,
  }))
})

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // ISR：缓存 60 秒后自动刷新
    '/videos/**': {
      isr: 60,  // 60 秒后重新验证
    },
 
    // ISR：缓存 1 小时
    '/blog/**': {
      isr: 3600,
    },
 
    // 永久缓存（等同于 SSG，但按需生成）
    '/docs/**': {
      isr: true,  // 永不过期
    },
 
    // SWR 模式：立即返回缓存，后台刷新
    '/categories/**': {
      swr: 300,  // 缓存 5 分钟
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // SSG：构建时预渲染
    '/': { prerender: true },
    '/about': { prerender: true },
    '/pricing': { prerender: true },
    '/features': { prerender: true },
    '/blog/**': { prerender: true },
    '/help/**': { prerender: true },
 
    // ISR：缓存 + 定期刷新
    '/videos/**': { isr: 60 },
    '/categories/**': { swr: 300 },
 
    // SSR：每次请求实时渲染
    '/studio/**': { ssr: true },
    '/admin/**': { ssr: true },
 
    // SPA：客户端渲染（不需要 SEO 的页面）
    '/settings/**': { ssr: false },
  },
})

<!-- app/pages/videos/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: video } = await useFetch(`/api/videos/${route.params.id}`)
 
if (!video.value) {
  throw createError({ statusCode: 404, message: '视频不存在' })
}
 
// SEO 元信息
useSeoMeta({
  title: `${video.value.title} - AI 视频平台`,
  description: video.value.description?.slice(0, 160),
  ogTitle: video.value.title,
  ogDescription: video.value.description?.slice(0, 160),
  ogImage: video.value.thumbnail,
  ogType: 'video.other',
  twitterCard: 'summary_large_image',
})
 
// 结构化数据（JSON-LD）
useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'VideoObject',
      name: video.value.title,
      description: video.value.description,
      thumbnailUrl: video.value.thumbnail,
      uploadDate: video.value.createdAt,
      duration: `PT${video.value.duration}S`,
      contentUrl: video.value.url,
    }),
  }],
})
</script>

<!-- app/pages/index.vue — 首页落地页 -->
<script setup lang="ts">
defineRouteRules({ prerender: true })
 
useSeoMeta({
  title: 'AI 视频平台 - 用 AI 创造精彩视频',
  description: '基于最新 AI 技术，一键生成、编辑、发布高质量视频内容。',
  ogImage: '/images/og-home.jpg',
})
 
// 构建时获取精选视频（数据会嵌入静态 HTML）
const { data: featured } = await useFetch('/api/videos/featured', {
  pick: ['id', 'title', 'thumbnail', 'views'],
})
</script>
 
<template>
  <div>
    <HeroSection />
    <FeaturedVideos :videos="featured" />
    <FeatureShowcase />
    <PricingTable />
    <CTASection />
  </div>
</template>