外观
Next.js 与服务端渲染
- 状态：未准备
- 适用方向：前端 / Go 全栈
- 最近复习：待填写
- 下次复习：待安排
一句话回答
CSR 在客户端组织主要 UI，SSR 在请求时生成 HTML，静态生成提前生成可复用页面；Next.js App Router 还区分服务端与客户端组件，渲染地点、生成时机和缓存策略应分别解释。
原理解释
CSR、SSR、SSG 怎么选？
CSR 适合强交互应用，但初始内容可能依赖脚本和数据下载；SSR 可更早提供内容，代价是服务端工作和可能的请求等待；静态生成适合可提前产出的内容，更新需重新构建或再验证。SEO 与首屏性能还受内容、资源和部署影响，不能说 SSR 保证更快。
Server Component 与 Client Component
App Router 页面和布局默认属于服务端组件。服务端组件适合靠近数据源、读取服务端资源并减少客户端代码；客户端组件负责 state、事件和浏览器 API。'use client' 声明客户端模块边界，其导入依赖会影响客户端包，不能在其中放服务端秘密。
客户端组件不等于“首次只在浏览器渲染”：首次加载通常也会参与服务端 HTML 预渲染，再在浏览器 hydration。服务端组件也不等于每次请求必重新执行，生成和缓存取决于路由及配置。
hydration 为什么报不匹配？
客户端初次渲染应与服务端 HTML 一致。渲染中直接使用随机值、依赖本地时区的日期或只在浏览器存在的数据，可能产生不匹配。应确保初始数据一致，把真正浏览器专属逻辑放在适当边界，而不是到处 suppressHydrationWarning。
场景与边界
服务端传给客户端的 props 应符合 React 支持的可序列化值规则，不能随意传普通函数、连接对象或秘密。框架数据缓存与 HTTP 缓存不同；Next.js 大版本缓存默认值曾变化，必须结合本项目 Next 15 配置与路由验证，不背统一默认结论。
项目中的应用
结合 Blog 贡献数据与 MDX 页面，解释服务端取数、客户端动画和静态参数各自职责。数据再验证周期不代表所有页面、CDN 和浏览器都按同一周期刷新。
常见追问
- 何时加 use client？ 需要状态、事件或客户端能力的交互边界，尽量让边界只包住所需部分。
- 服务端组件能用 window 吗？ 不能把浏览器全局当服务端可用对象；客户端组件渲染阶段也要考虑预渲染。
- 流式渲染解决什么？ 允许先交付就绪部分，配合 Suspense 显示等待边界，不会自动消除慢查询。