CSR、SSR、SSG、ISR 有什么区别？Next.js 项目怎么选？

知识点详解：页面生成时机与数据新鲜度怎么配合

四个名字，先放到一条时间线上

假设网站同时有技术文章、实时看板和用户个人中心。它们对页面生成的要求并不相同。

方式	主要生成时机	需要重点检查
CSR	浏览器加载代码后	首次代码与数据等待、运行时工作
SSR	请求处理时	服务器耗时、缓存与用户隔离
SSG	构建时	构建规模、内容更新发布
ISR	缓存基础上增量再生成	失效触发、旧内容、部署支持

现实项目可以组合。例如文章内容提前生成，收藏按钮和编辑器由客户端交互。它们不是只能整站选四选一。

SSR 把 HTML 提前准备，不替你完成全部交互

服务器可以先输出有内容的 HTML，浏览器不必等所有客户端代码执行完才看到正文。但服务器等待数据也可能延长响应时间。

如果页面依赖 React、Vue 等框架的客户端交互，通常还要加载脚本并完成 hydration 等连接工作。页面已经可见，不代表按钮已经能及时响应。

CSR 也不等于永远不能被搜索引擎理解，但会增加对脚本执行和内容可获取性的依赖。SEO 需要一起检查真实响应内容、状态码、链接和元数据，不只看渲染名称。

ISR 的更新，不是时间一到就全站定时重建

以 Next.js 文档中的时间再验证方式为例：页面在缓存有效期内被复用；过期后下一次请求可能先拿旧页面，同时触发后台再生成；新版本成功后替换缓存。不是每到一个整分钟就自动为无人访问的所有页面执行任务。

按事件失效又有不同的接口与行为，具体要看所用框架及路由模式。更新失败时如何继续提供旧内容、多实例怎样共享缓存，都属于部署问题。

Next.js 的 ISR 也不等于纯静态导出能力。只把一堆 HTML 上传到普通静态服务器，不会自动拥有后台再生成服务。

本题讨论 Web 渲染机制，不提供把 Next.js API 翻译到 Python 的伪实现。Python 服务端可以生成 HTML，但那是另外的框架实现。

最终选择跟着内容和访问路径走

公共文章可以接受短暂延迟更新，预生成配合明确的失效机制通常值得考虑。个人中心包含身份信息，应检查请求隔离，不能直接沿用公共页面缓存键。

实时看板要持续更新，初始 HTML 与之后的数据刷新可以分别设计。很多时候不是推翻整套渲染方案，而是把高频变化部分留给客户端。

验收用用户真的访问的路径：首次直达、站内切换、登录与退出、内容更新、服务异常。分别看响应等待、内容出现和交互，而不是只报一个首页跑分。

本题机制参考：web.dev：Rendering on the Web、Next.js：ISR。

面试官继续追问

SSG 页面一定不含 JavaScript 吗？

不一定。页面提前生成与是否带客户端脚本是两个问题，静态页面也可以有交互。

ISR 能保证每个请求都看到最新内容吗？

通常不能这样保证。要看缓存和再验证策略，允许旧内容的窗口必须明确。

个人页面可以缓存吗？

可以设计私有或按用户隔离的缓存，但不能误用公共共享缓存；安全和新鲜度先于命中率。

面试速记卡

• CSR：浏览器执行代码生成界面。
• SSR：请求时准备 HTML，后续交互仍需连接。
• SSG：构建时预生成，更新要有发布或再生成路径。
• ISR：框架的增量缓存更新机制，行为依实现。
• 选型：生成时机、共享范围、新鲜度与部署能力。