🚀 Nuxt 预渲染 (Prerendering)

学习 Nuxt.js 的预渲染功能，实现静态站点生成 (SSG) 和构建时优化

📖 什么是预渲染？

预渲染 (Prerendering) 是在构建时将动态页面转换为静态 HTML 文件的过程。这样可以提供更好的 SEO、更快的首屏加载速度，并且可以部署到 CDN 上。

🎯 SEO 友好

搜索引擎可以直接抓取预渲染的 HTML 内容

⚡ 性能优异

无需等待 JavaScript 执行，直接显示内容

🌐 CDN 友好

静态文件可以缓存在全球 CDN 节点

⚙️ 配置预渲染

1. nuxt.config.ts 配置

    export default defineNuxtConfig({
  // 启用预渲染模式
  nitro: {
    prerender: {
      // 预渲染路由
      routes: [
        '/',
        '/about',
        '/blog',
        '/learn-nuxt/prerender'
      ],
      // 自动发现链接并预渲染
      crawlLinks: true,
      // 忽略某些路由
      ignore: ['/admin', '/api']
    }
  },

  // 或者使用 ssr: false 进行 SPA 模式
  ssr: true, // 保持 SSR 以获得更好的预渲染效果

  // 静态站点生成
  target: 'static'
})

2. 构建命令

    # 生成静态站点
npm run generate

# 或者使用 build 命令（会自动预渲染）
npm run build

# 预览生成的站点
npm run preview

🔄 动态路由预渲染

当前页面信息

路由: /learn-nuxt/prerender

生成时间: 2025/11/12 11:00:04

是否预渲染: 否

构建模式:

动态路由示例

    // nuxt.config.ts - 动态路由配置
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: async () => {
        // 获取所有博客文章的 slug
        const posts = await $fetch('/api/blog/posts')
        return posts.map(post => '/blog/' + post.slug)
      }
    }
  }
})

// pages/blog/[slug].vue - 页面组件
// 这个函数会在预渲染时被调用
export async function getStaticPaths() {
  const posts = await $fetch('/api/blog/posts')
  return posts.map(post => ({
    params: { slug: post.slug }
  }))
}

🎪 实际演示

📄 静态内容 (预渲染)

文章标题 1

这是预渲染的静态内容，在构建时就已经生成

✅ 已预渲染

文章标题 2

SEO 友好，加载速度快

✅ 已预渲染

⚡ 动态内容 (客户端)

当前时间

🔄 客户端渲染

随机数

💡 最佳实践

✅ 适合预渲染的内容

• 博客文章和静态页面
• 产品展示页面
• 文档和帮助页面
• 营销落地页

❌ 不适合预渲染的内容

• 用户个人仪表板
• 实时数据展示
• 需要认证的页面
• 频繁变化的内容

📊 性能对比

渲染方式	首屏时间	SEO	缓存	适用场景
预渲染 (SSG)	最快	优秀	最佳	静态内容
服务端渲染 (SSR)	快	优秀	中等	动态内容
客户端渲染 (SPA)	慢	较差	中等	交互应用

🛠️ 实用工具和命令

调试命令

    # 查看预渲染的路由
npx nuxi analyze

# 构建并查看输出
npm run build -- --analyze

# 本地预览静态站点
npm run preview

部署选项

• Netlify / Vercel (自动构建)
• GitHub Pages (静态托管)
• CDN + 对象存储
• Docker 容器化部署

← 返回学习首页