Nuxt.js静态站点生成（SSG）

章节概述

静态站点生成（Static Site Generation，简称SSG）是一种在构建时生成静态HTML文件的网站构建方式。与传统的服务端渲染（SSR）相比，SSG生成的网站具有更高的性能、更好的SEO表现和更低的服务器成本。Nuxt.js提供了强大的SSG功能，使得构建静态网站变得简单而高效。本章节将详细介绍Nuxt.js中的SSG功能，包括基本概念、配置方法、动态路由处理、增量静态再生和部署策略。

核心知识点讲解

1. SSG的基本概念

什么是SSG

SSG是指在构建时预渲染所有页面为静态HTML文件的过程，这些静态文件可以直接部署到任何静态文件服务器上。与传统的客户端渲染（CSR）和服务端渲染（SSR）相比，SSG具有以下特点：

高性能：静态文件加载速度快，无需服务器渲染
SEO友好：搜索引擎可以直接索引静态HTML内容
低成本：可以部署到任何静态文件服务器，甚至CDN
可靠性：没有服务器端逻辑，减少了服务器错误的可能性
可缓存：静态文件可以被浏览器和CDN高度缓存

SSG vs SSR vs CSR

特性	SSG	SSR	CSR
渲染时机	构建时	请求时	客户端
首屏加载速度	快	中	慢
SEO友好度	高	高	低
服务器成本	低	高	低
动态数据	构建时/ISR	实时	实时
部署复杂度	低	高	低

2. Nuxt.js中SSG的配置

基本配置

在Nuxt.js中，启用SSG功能非常简单，只需在nuxt.config.js中配置target: 'static'：

export default {
  // 启用静态站点生成
  target: 'static',
  
  // 其他配置...
}

生成配置

你可以在nuxt.config.js中配置生成选项：

export default {
  target: 'static',
  
  generate: {
    // 生成的静态文件目录
    dir: 'dist',
    // 生成的路由列表
    routes: ['/', '/about', '/contact'],
    // 并发生成的路由数量
    concurrency: 50,
    // 生成错误时是否继续
    fallback: true, // 为404页面生成fallback HTML
    // 增量静态再生
    incremental: true,
    // 再生间隔（秒）
    interval: 60 * 15 // 15分钟
  }
}

3. 动态路由静态生成

对于包含动态参数的路由，Nuxt.js需要知道所有可能的路由参数值才能在构建时生成静态文件。

基本动态路由

对于基本的动态路由，如pages/blog/_slug.vue，你需要在nuxt.config.js中配置所有可能的slug值：

export default {
  generate: {
    routes: async () => {
      // 从API获取所有博客文章的slug
      const { data } = await axios.get('https://api.example.com/posts')
      return data.map(post => `/blog/${post.slug}`)
    }
  }
}

嵌套动态路由

对于嵌套的动态路由，如pages/blog/_slug/comments/_id.vue，你需要生成完整的路由路径：

export default {
  generate: {
    routes: async () => {
      // 从API获取所有博客文章
      const { data: posts } = await axios.get('https://api.example.com/posts')
      
      // 生成博客文章路由
      const postRoutes = posts.map(post => `/blog/${post.slug}`)
      
      // 生成评论路由
      const commentRoutes = []
      for (const post of posts) {
        const { data: comments } = await axios.get(`https://api.example.com/posts/${post.id}/comments`)
        commentRoutes.push(...comments.map(comment => `/blog/${post.slug}/comments/${comment.id}`))
      }
      
      return [...postRoutes, ...commentRoutes]
    }
  }
}

动态路由参数验证

你可以在动态路由页面中使用validate方法验证路由参数：

<!-- pages/blog/_slug.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const { data } = await $axios.get(`https://api.example.com/posts/${params.slug}`)
    return { post: data }
  },
  
  // 验证路由参数
  validate({ params }) {
    // 验证slug是否为有效的字符串
    return typeof params.slug === 'string' && params.slug.length > 0
  }
}
</script>

4. 增量静态再生（ISR）

增量静态再生（Incremental Static Regeneration，简称ISR）是Nuxt.js 2.13+引入的功能，允许你在构建后更新静态页面，而不需要重新构建整个网站。

基本配置

在nuxt.config.js中启用ISR：

export default {
  generate: {
    // 启用增量静态再生
    incremental: true,
    // 再生间隔（秒）
    interval: 60 * 15 // 15分钟
  }
}

页面级ISR配置

你可以在页面组件中配置ISR选项：

<!-- pages/blog/_slug.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
    <p>最后更新: {{ lastUpdated }}</p>
  </div>
</template>

<script>
export default {
  // 页面级ISR配置
  generate: {
    // 此页面的再生间隔（秒）
    interval: 60 * 5 // 5分钟
  },
  
  async asyncData({ params, $axios }) {
    const { data } = await $axios.get(`https://api.example.com/posts/${params.slug}`)
    return {
      post: data,
      lastUpdated: new Date().toISOString()
    }
  }
}
</script>

ISR的工作原理

ISR的工作原理如下：

在构建时，Nuxt.js生成所有页面的静态HTML文件
当用户请求一个页面时，服务器返回缓存的静态文件
如果页面已经超过了配置的再生间隔，Nuxt.js会在后台重新生成该页面
下次用户请求时，会收到更新后的静态文件

5. SSG部署策略

SSG生成的静态文件可以部署到任何静态文件服务器或CDN上。

部署到Netlify

Netlify是一个流行的静态网站托管服务，支持自动构建和部署：

将代码推送到GitHub/GitLab/Bitbucket
在Netlify上创建新站点，连接到你的代码仓库
配置构建命令：npm run generate
配置发布目录：dist
点击"Deploy site"开始部署

部署到Vercel

Vercel是另一个流行的静态网站托管服务，对Next.js和Nuxt.js有特别好的支持：

将代码推送到GitHub/GitLab/Bitbucket
在Vercel上创建新项目，连接到你的代码仓库
Vercel会自动检测Nuxt.js项目并配置构建设置
点击"Deploy"开始部署

部署到GitHub Pages

GitHub Pages是一个免费的静态网站托管服务：

在nuxt.config.js中配置router.base：

export default {
  router: {
    base: '/your-repo-name/'
  }
}

构建项目：

npm run generate

将dist目录推送到GitHub仓库的gh-pages分支：

cd dist
git init
git add .
git commit -m "deploy"
git push -f git@github.com:your-username/your-repo-name.git master:gh-pages

部署到CDN

对于高流量网站，建议使用CDN加速静态文件：

构建项目：

npm run generate

将dist目录上传到CDN，如阿里云CDN、腾讯云CDN或Cloudflare
配置CDN缓存策略，确保静态文件被正确缓存

实用案例分析

案例1：博客网站SSG实现

场景：构建一个博客网站，包含文章列表、文章详情和标签页

解决方案：

配置Nuxt.js为SSG模式

// nuxt.config.js
export default {
  target: 'static',
  
  generate: {
    // 启用增量静态再生
    incremental: true,
    // 再生间隔
    interval: 60 * 30, // 30分钟
    // 生成路由
    routes: async () => {
      const { $axios } = require('./node_modules/@nuxtjs/axios')
      const axios = $axios.create({
        baseURL: 'https://api.example.com'
      })
      
      // 获取所有文章
      const { data: posts } = await axios.get('/posts')
      const postRoutes = posts.map(post => `/blog/${post.slug}`)
      
      // 获取所有标签
      const { data: tags } = await axios.get('/tags')
      const tagRoutes = tags.map(tag => `/tags/${tag.slug}`)
      
      return [...postRoutes, ...tagRoutes]
    }
  }
}

创建文章列表页面

<!-- pages/blog/index.vue -->
<template>
  <div>
    <h1>博客文章</h1>
    <div v-for="post in posts" :key="post.id" class="post-card">
      <h2><nuxt-link :to="`/blog/${post.slug}`">{{ post.title }}</nuxt-link></h2>
      <p>{{ post.excerpt }}</p>
      <p class="meta">
        <span>{{ post.date }}</span>
        <span v-for="tag in post.tags" :key="tag.id">
          <nuxt-link :to="`/tags/${tag.slug}`">{{ tag.name }}</nuxt-link>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get('https://api.example.com/posts')
    return { posts: data }
  }
}
</script>

创建文章详情页面

<!-- pages/blog/_slug.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div class="meta">
      <span>{{ post.date }}</span>
      <span v-for="tag in post.tags" :key="tag.id">
        <nuxt-link :to="`/tags/${tag.slug}`">{{ tag.name }}</nuxt-link>
      </span>
    </div>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  generate: {
    // 文章页面10分钟再生一次
    interval: 60 * 10
  },
  
  async asyncData({ params, $axios }) {
    const { data } = await $axios.get(`https://api.example.com/posts/${params.slug}`)
    return { post: data }
  },
  
  validate({ params }) {
    return typeof params.slug === 'string' && params.slug.length > 0
  }
}
</script>

创建标签页

<!-- pages/tags/_slug.vue -->
<template>
  <div>
    <h1>标签: {{ tag.name }}</h1>
    <div v-for="post in posts" :key="post.id" class="post-card">
      <h2><nuxt-link :to="`/blog/${post.slug}`">{{ post.title }}</nuxt-link></h2>
      <p>{{ post.excerpt }}</p>
      <p class="meta">{{ post.date }}</p>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const { data: tag } = await $axios.get(`https://api.example.com/tags/${params.slug}`)
    const { data: posts } = await $axios.get(`https://api.example.com/posts?tag=${params.slug}`)
    return { tag, posts }
  },
  
  validate({ params }) {
    return typeof params.slug === 'string' && params.slug.length > 0
  }
}
</script>

案例2：电商产品展示网站

场景：构建一个电商产品展示网站，包含产品列表、产品详情和分类页

解决方案：

配置Nuxt.js为SSG模式

// nuxt.config.js
export default {
  target: 'static',
  
  generate: {
    // 启用增量静态再生
    incremental: true,
    // 再生间隔
    interval: 60 * 60, // 1小时
    // 生成路由
    routes: async () => {
      const { $axios } = require('./node_modules/@nuxtjs/axios')
      const axios = $axios.create({
        baseURL: 'https://api.example.com'
      })
      
      // 获取所有产品
      const { data: products } = await axios.get('/products')
      const productRoutes = products.map(product => `/products/${product.id}`)
      
      // 获取所有分类
      const { data: categories } = await axios.get('/categories')
      const categoryRoutes = categories.map(category => `/categories/${category.slug}`)
      
      return [...productRoutes, ...categoryRoutes]
    }
  }
}

创建产品列表页面

<!-- pages/products/index.vue -->
<template>
  <div>
    <h1>产品列表</h1>
    <div class="products-grid">
      <div v-for="product in products" :key="product.id" class="product-card">
        <img :src="product.image" :alt="product.name">
        <h2><nuxt-link :to="`/products/${product.id}`">{{ product.name }}</nuxt-link></h2>
        <p>{{ product.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get('https://api.example.com/products')
    return { products: data }
  }
}
</script>

创建产品详情页面

<!-- pages/products/_id.vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <img :src="product.image" :alt="product.name">
    <p>{{ product.price }}</p>
    <div v-html="product.description"></div>
    <h2>相关产品</h2>
    <div class="related-products">
      <div v-for="related in relatedProducts" :key="related.id" class="product-card">
        <img :src="related.image" :alt="related.name">
        <h3><nuxt-link :to="`/products/${related.id}`">{{ related.name }}</nuxt-link></h3>
        <p>{{ related.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  generate: {
    // 产品页面30分钟再生一次
    interval: 60 * 30
  },
  
  async asyncData({ params, $axios }) {
    const { data: product } = await $axios.get(`https://api.example.com/products/${params.id}`)
    const { data: relatedProducts } = await $axios.get(`https://api.example.com/products?category=${product.categoryId}&limit=4`)
    return { product, relatedProducts }
  },
  
  validate({ params }) {
    return /^\d+$/.test(params.id)
  }
}
</script>

创建分类页面

<!-- pages/categories/_slug.vue -->
<template>
  <div>
    <h1>分类: {{ category.name }}</h1>
    <div class="products-grid">
      <div v-for="product in products" :key="product.id" class="product-card">
        <img :src="product.image" :alt="product.name">
        <h2><nuxt-link :to="`/products/${product.id}`">{{ product.name }}</nuxt-link></h2>
        <p>{{ product.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const { data: category } = await $axios.get(`https://api.example.com/categories/${params.slug}`)
    const { data: products } = await $axios.get(`https://api.example.com/products?category=${category.id}`)
    return { category, products }
  },
  
  validate({ params }) {
    return typeof params.slug === 'string' && params.slug.length > 0
  }
}
</script>

最佳实践

合理规划路由结构：
- 设计清晰的路由结构，便于生成静态文件
- 对于动态路由，确保能获取所有可能的参数值
- 使用嵌套路由组织相关页面
优化构建性能：
- 对于大型网站，分批生成路由，避免构建超时
- 使用concurrency选项控制并发生成数量
- 优化API请求，减少构建时间
处理动态数据：
- 对于频繁变化的数据，使用ISR保持内容新鲜
- 对于实时数据，考虑在客户端使用API请求
- 使用useStaticFetch组合式API获取静态数据
SEO优化：
- 为每个页面设置合适的元信息
- 使用nuxt/content管理内容，提高SEO友好度
- 生成sitemap.xml和robots.txt文件
部署策略：
- 选择合适的静态文件托管服务
- 配置CDN加速静态文件
- 实现自动化部署流程
错误处理：
- 配置404页面
- 处理构建时的API错误
- 为动态路由设置合理的验证规则

SSG性能优化

减少构建时间：
- 优化API请求，使用缓存
- 减少并发生成数量，避免服务器过载
- 只生成必要的路由
优化静态文件大小：
- 压缩HTML、CSS和JavaScript文件
- 优化图片资源
- 使用代码分割减少初始加载大小
提高页面加载速度：
- 使用预加载和预连接
- 优化关键渲染路径
- 实现懒加载
缓存策略：
- 为静态文件设置合理的缓存头
- 使用CDN缓存静态内容
- 实现浏览器缓存

常见问题及解决方案

1. 动态路由生成失败

问题：构建时动态路由生成失败，因为API请求出错

解决方案：

检查API地址和认证信息
实现API请求错误处理
使用本地数据作为 fallback

2. 构建时间过长

问题：构建时间过长，特别是对于大型网站

解决方案：

分批生成路由
优化API请求
增加构建服务器的资源
使用增量构建

3. 动态数据更新不及时

问题：使用SSG后，动态数据更新不及时

解决方案：

启用ISR，设置合理的再生间隔
对于频繁变化的数据，使用客户端API请求
实现手动触发构建的机制

4. 路由参数验证失败

问题：动态路由参数验证失败，导致页面无法访问

解决方案：

确保所有路由参数都能通过验证
在validate方法中实现合理的验证逻辑
处理验证失败的情况

5. 部署后页面空白

问题：部署后页面显示空白，没有内容

解决方案：

检查路由配置，特别是router.base
确保所有静态文件都已正确上传
检查浏览器控制台是否有错误

总结

本章节介绍了Nuxt.js中的静态站点生成（SSG）功能，包括：

SSG的基本概念：在构建时生成静态HTML文件，具有高性能、SEO友好等特点
Nuxt.js中SSG的配置：通过设置target: 'static'启用SSG模式
动态路由静态生成：通过配置generate.routes生成动态路由的静态文件
增量静态再生（ISR）：在构建后更新静态页面，无需重新构建整个网站
SSG部署策略：将静态文件部署到静态文件服务器或CDN

SSG是构建高性能、SEO友好网站的理想选择，特别适合内容相对稳定的网站，如博客、企业官网、产品展示网站等。通过合理使用Nuxt.js的SSG功能，你可以构建出既快速又易于维护的静态网站。

在实际项目中，应根据网站的具体需求和数据更新频率，选择合适的生成策略，平衡构建时间和内容新鲜度，为用户提供最佳的访问体验。