Nuxt.js 的静态站点生成（SSG）是如何工作的？与服务器端渲染（SSR）有什么区别？

Nuxt.js 提供了强大的静态站点生成功能，允许开发者将应用预渲染为静态 HTML 文件，提高性能和 SEO。

静态站点生成（SSG）工作原理：

1. 构建过程

   • 使用 nuxt generate 命令触发静态站点生成
   • Nuxt.js 会遍历所有路由，为每个路由生成对应的 HTML 文件
   • 同时生成必要的 JavaScript 和 CSS 文件

2. 数据获取

   • 在生成过程中，会执行每个页面的 asyncData 和 fetch 方法
   • 获取的数据会被注入到生成的 HTML 文件中
   • 生成的页面包含完整的内容，无需客户端再获取数据

3. 生成产物

   • 生成的静态文件存放在 dist 目录中
   • 包括 HTML 文件、JavaScript 包、CSS 文件等
   • 可以部署到任何静态文件服务器上

4. 动态内容处理

   • 对于需要动态内容的页面，可以使用客户端数据获取
   • 可以使用 nuxtServerInit 或其他方法处理动态数据

SSG 与 SSR 的主要区别：

特性	静态站点生成（SSG）	服务器端渲染（SSR）
构建时机	构建时生成静态文件	请求时动态渲染
部署环境	任何静态文件服务器	需要 Node.js 服务器
性能	加载速度快，无需服务器处理	每次请求都需要服务器渲染
SEO	优秀，静态 HTML 易于索引	优秀，服务器渲染内容易于索引
适用场景	内容变化不频繁的网站	内容频繁变化的应用
成本	部署成本低	需要服务器运行成本

SSG 的优势：

1. 性能优异

   • 静态文件加载速度快，无需服务器处理
   • 可以利用 CDN 加速分发
   • 首屏加载时间短，用户体验好

2. 部署简单

   • 可以部署到任何静态文件服务器
   • 支持 Netlify、Vercel 等静态托管服务
   • 无需维护 Node.js 服务器

3. SEO 友好

   • 静态 HTML 文件包含完整内容，易于被搜索引擎索引
   • 页面加载速度快，有利于搜索排名

4. 安全性高

   • 静态文件不存在服务器端代码执行风险
   • 减少了攻击面

最佳实践：

1. 内容类型

   • 适合内容变化不频繁的网站，如博客、企业官网、文档站点
   • 不适合实时数据要求高的应用，如实时聊天、动态仪表板

2. 数据获取

   • 使用 asyncData 和 fetch 方法在构建时获取数据
   • 对于动态内容，考虑使用客户端数据获取

3. 路由处理

   • 确保所有动态路由在构建时被正确生成
   • 使用 generate.routes 配置处理动态路由

4. 缓存策略

   • 合理设置静态文件缓存策略
   • 对于频繁变化的内容，考虑使用客户端数据获取

注意事项：

• 静态站点生成需要在构建时获取所有页面的数据
• 对于大型网站，构建时间可能较长
• 动态路由需要在配置中明确指定，否则可能不会被生成
• 实时数据需要通过客户端 API 调用获取

示例配置：

javascript
// nuxt.config.js
export default {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/posts/1',
      // 可以通过函数动态生成路由
      ...Array.from({ length: 10 }, (_, i) => `/products/${i + 1}`)
    ]
  }
}

​