四种渲染模式的交互式示例，深入理解 Next.js 的核心特性
Server-Side Rendering
每次请求都重新执行组件，数据永远新鲜
SSR with Authentication
在 SSR 中处理需要登录态的 API 请求
Static Site Generation
构建时生成静态 HTML，CDN 直接返回
Incremental Static Regeneration
定时更新静态页面，兼顾速度和新鲜度
Client-Side Rendering
浏览器下载 JS 后激活，丰富的交互体验
React Server Components
只运行在服务端，零 bundle 体积，直接访问后端资源
Advanced SSR + Hydration
渐进式水合、Suspense 边界、流式渲染
| 特性 | SSR | SSG | ISR | CSR |
|---|---|---|---|---|
| 首屏速度 | ● 快 | ● 最快 | ● 最快 | ▲ 慢 |
| SEO | ● 优秀 | ● 优秀 | ● 优秀 | × 差 |
| 数据新鲜度 | ● 实时 | × 构建时 | ▲ 定时 | ● 实时 |
| 服务器压力 | × 高 | ● 无 | ● 低 | ● 无 |
点击上方的卡片查看详细示例