你可能会说
打开页面先白屏两三秒，然后内容才「啪」地出来，体验很差。
CSR 是浏览器下载 JS 后在客户端执行渲染——服务器只发空壳 HTML，所有内容由 JS 动态生成。
服务器只发一个空 HTML + JS 文件，浏览器下载 JS 后在本地渲染页面。首屏慢但交互流畅。
生活类比
像给你一盒乐高和说明书，你自己在家拼——拼的过程（加载）慢，但拼好后随便改。
🎮 动手试试
👇 观察 CSR 加载各阶段
关于「CSR」，以下哪个描述最准确？
你可以这样告诉 AI
帮我优化 CSR 首屏：代码分割减小 JS 体积、骨架屏填充白屏时间、关键数据预取（preload）。
CSR 浏览器渲染（白屏→内容），SSR 服务器渲染（直接看到内容→再激活交互）。
SSG 构建时就生成 HTML（最快），CSR 运行时才渲染（最慢但最灵活）。
交互密集应用
后台管理系统、在线文档编辑器等登录后才能用的应用，CSR 首屏慢但切换页面快，体验流畅。
和 AI 协作时
想让 AI 优化 CSR 时，直接说「代码分割减小 JS 体积、骨架屏填充白屏时间、关键数据预取 preload」。
SEO 优先站点
需要搜索引擎收录的博客、电商、营销页不适合纯 CSR，爬虫可能看不到 JS 渲染的内容。
与前端渲染无关的项目
后端服务、数据处理、命令行工具等不需要关心客户端渲染策略。
服务器只发一个空 HTML + JS 文件，浏览器下载 JS 后在本地渲染页面。首屏慢但交互流畅。
像给你一盒乐高和说明书，你自己在家拼——拼的过程（加载）慢，但拼好后随便改。
纯 React 项目（没有 Next.js）默认是 CSR。提到「SPA 就是 CSR」时。