Next.js中的SSR/SSG/ISR有什么区别和使用场景?

165 阅读2分钟

1. 静态站点生成(SSG, Static Site Generation)

  • 定义:在构建时生成HTML文件,然后将这些文件部署到服务器上。每个请求都返回相同的预渲染页面。

  • 优点

    • 利于SEO
    • 性能优越,因为页面已经预先生成,可以非常快速地加载。
    • 对于内容不经常变化的网站来说,维护成本低。
    • 容易与CDN集成,提供更好的全球访问速度。
  • 缺点

    • 不适合需要频繁更新内容的网站,因为每次更新都需要重新生成所有页面。
  • 适用场景:博客、文档站点等。

2. 服务器端渲染(SSR, Server-Side Rendering)

  • 定义:每次请求到达服务器时,都会动态地生成HTML并发送给客户端。这种方式允许根据用户的请求或会话数据来定制响应。

  • 优点

    • 利于SEO
    • 可以根据用户信息实时生成,合处理动态内容。
  • 缺点

    • 相比SSG性能较低,每次请求都需要服务端生成
    • 对服务器资源要求较高
  • 适用场景:社交网络、电子商务平台等需要展示个性化内容的应用。

3. 增量静态再生(ISR, Incremental Static Regeneration)

  • 定义:结合了SSG的优点,并允许在已有静态页面的基础上进行更新。可以在接收到请求时按需生成或更新页面,而不需要重建整个站点。

  • 优点

    • 利于SEO
    • 有SSG的性能优势,兼顾灵活地更新内容
    • 支持部分页面的即时更新,降低了更新成本
  • 缺点

    • 第一次访问未缓存的新页面或已过期页面时可能会有短暂延迟,因为需要等待页面生成。
  • 适用场景:新闻网站、电商产品页等需要定期更新但大部分内容相对稳定的应用。

4. SSR SSG ISG 区别对比

image.png