在 Next.js 中,CSR (客户端渲染)、SSR (服务端渲染) 和 SSG (静态站点生成) 是三种核心的页面渲染策略。Next.js 的强大之处在于它允许你在同一个应用中为不同的页面混合使用这些策略。 以下是这三者的详细对比和区别: --- 1. SSG - Static Site Generation (静态站点生成) 核心概念: 页面在 构建阶段 (Build Time) 就已经被生成为 HTML 文件。当用户访问页面时,服务器直接返回这个已经准备好的 HTML,不需要实时计算。 生成时机: 时(项目打包时)。 数据获取: Pages Router: 使用 。 App Router: 默认行为(fetch 请求默认缓存)。 优点: 性能最快: HTML 可以被 CDN 缓存,用户请求时直接由边缘节点返回。 SEO 极佳: 爬虫可以直接看到完整的 HTML 内容。 服务器压力小: 不需要为每个请求运行服务器端逻辑。 缺点: 数据实时性差: 如果数据更新,需要重新构建整个项目(除非使用 ISR,见下文)。 构建时间: 如果页面非常多(如几万个商品页),构建时间会很长。 ...