标准答案

  1. SSR 在请求时生成 HTML,适合登录态相关、地域化、价格库存等需要请求时数据的页面。
  2. SSG 在构建时生成 HTML,适合博客、文档、营销页等内容稳定且 SEO 重要的页面。
  3. ISR 在静态页面基础上按 revalidate 策略更新,适合内容较多、需要定期刷新但不必每次请求实时的页面。
  4. CSR 主要在浏览器端请求和渲染,适合后台管理、复杂交互工具或不依赖搜索收录的页面。
  5. 真实项目常混合使用,不应把整个应用强行归为一种渲染模式。

题目解析

这道题要从数据时效性、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 周期,导致用户看到过期内容。

作者信息