了解 getStaticProps和 getServerSideProps的区别对于构建高效的 Next.js 应用至关重要。下面这个表格清晰地展示了它们的核心差异。
| 特性维度 | getStaticProps (静态生成) | getServerSideProps (服务端渲染) |
|---|---|---|
| 执行时机 | 在应用构建时 (next build) 运行 | 在每次页面请求时在服务器端运行 |
| 核心原理 | SSG (Static Site Generation) | SSR (Server-Side Rendering) |
| 数据新鲜度 | 构建时的数据，除非使用 revalidate启用 ISR | 每次请求都获取最新数据，实时性高 |
| 性能特点 | 极高。直接返回预生成的静态HTML，可被CDN缓存 | 相对较低。每次请求都需要服务器执行逻辑并渲染页面 |
| SEO 支持 | ✅ 非常好 | ✅ 非常好 |
| 适用场景 | 博客文章、产品展示、文档、营销页面等数据不常变的内容 | 用户仪表盘、实时数据（如股价）、订单详情等需要个性化或实时数据的页面 |
| 动态路由 | 需配合 getStaticPaths预定义路径 | 可直接使用，自动处理所有动态路径 |
| 访问请求对象 | ❌ 无法访问具体的请求对象（如cookies） | ✅ 可通过 context访问 req, res等请求上下文 |
💡 如何选择？
你可以根据页面对数据实时性的要求来做决定：
- 追求极致性能，内容稳定时：优先选择
getStaticProps。对于电商产品页、新闻文章等大量页面，即使数据有偶尔更新的需求，也可以结合 增量静态再生（ISR） ，通过设置revalidate属性来实现后台定时更新，从而在性能和新鲜度之间取得平衡。 - 需要最新数据或个性化内容时：使用
getServerSideProps。当页面内容依赖于用户身份（如个人中心）、或需要显示实时变动的信息（如股票行情）时，这是唯一选择。
🔄 了解App Router的新范式
需要注意的是，以上讨论基于Next.js的 Pages Router（即通过 pages目录创建页面的传统方式）。从Next.js 13开始，官方推荐使用新的 App Router（基于 app目录）。在App Router中，getStaticProps和 getServerSideProps的概念被简化了。你只需在服务器组件中直接使用 async/await获取数据即可。Next.js会根据你使用的Fetch API的缓存配置（如 { next: { revalidate: 60 } }）自动判断是静态生成还是动态渲染，这让开发变得更直观。
