CSR，英文全称 Client-side Rendering，中文翻译为 客户端渲染，传统 React的使用方式就是客户端渲染。
- 浏览器首先下载一个非常小的 html 和渲染所需要的 JavaScript
- 在 JavaScript 中执行发送请求、获取数据、更新 DOM 和渲染页面等操作
- 缺点是速度不够快
在下载、解析、执行 Javascript 以及请求数据没有返回前，页面不会完全呈现。
理想用例
- 需要立即反馈的页面元素用户交互，JavaScript可以比等待服务器往返在SSR中提供更快的响应。
- 具有实时数据的管理仪表板，例如Vercel Analytics中的图表
- 初次加载后的持续后台任务，例如像Notion这样的应用程序，用户编写时将内容同步回服务器
优点
- 高度互动的用户体验
- 无缝的应用状态过渡
- 与外部数据的实时互动
实现注意事项
- 由于JavaScript包需要下载才能启动fetch，初始加载可能较慢
- 优化核心Web Vitals可能具有挑战性
- 需要仔细的客户端状态管理
最佳实践
- 依赖Next.js代码分割以减少初始包大小
- 对于初始加载使用服务器端渲染，然后进行水合以实现互动性（这有助于最大内容绘制）