标准答案
- SSR 在请求时生成 HTML,适合登录态相关、地域化、价格库存等需要请求时数据的页面。
- SSG 在构建时生成 HTML,适合博客、文档、营销页等内容稳定且 SEO 重要的页面。
- ISR 在静态页面基础上按 revalidate 策略更新,适合内容较多、需要定期刷新但不必每次请求实时的页面。
- CSR 主要在浏览器端请求和渲染,适合后台管理、复杂交互工具或不依赖搜索收录的页面。
- 真实项目常混合使用,不应把整个应用强行归为一种渲染模式。
题目解析
这道题要从数据时效性、SEO、首屏性能、个性化和部署成本综合判断。
SSG 和 ISR 更利于缓存和稳定首屏,SSR 更灵活但会增加服务端运行成本。
CSR 不是错误选择,只是不能默认承担内容型页面的 SEO 和首屏展示压力。
代码示例
下面的 revalidate 表示页面可以静态生成,并在指定周期后重新验证数据。
TypeScript
export const revalidate = 3600
export default async function ArticlePage({ params }: { params: { slug: string } }) {
const article = await fetchArticle(params.slug)
return <ArticleDetail article={article} />
}常见误区
- 认为 SSR 一定比 SSG 更利于 SEO,忽略静态 HTML 同样可以被收录。
- 后台管理页也强行 SSR,增加复杂度但收益很低。
- 对强实时数据使用过长 ISR 周期,导致用户看到过期内容。