/lab
Next.js 面试学习的可运行实验区。每章对应一组最小实验，用于验证笔记里的机制。 注意：开发模式（pnpm dev）下所有页面每次请求都重新渲染， 观察静态/动态差异请用 pnpm build && pnpm start， build 日志的 ●（静态）/ ƒ（动态）是最直观证据。
01
渲染模型
SSR / CSR / SSG / ISR 区别与选型、水合 Hydration
- csr · 客户端渲染
- ssr · 服务端渲染
- ssg · 静态生成
- isr · 增量重建
- hydration · 水合
02
App Router 路由
文件系统路由、动态/捕获段、layout 状态保留、并行/拦截路由
- basics · 文件系统路由
- layout-state · 布局状态保留
- segments · 动态/捕获段
- group · 路由组
- special-files · loading/error
- parallel · 并行路由
- intercepting · 拦截路由
03
React Server Components
'use client' 边界、Server 组件限制、window 坑
- server-data · 服务端取数
- client-boundary · use client 边界
- window-pitfall · window 坑
- hybrid · 混合树
- daisyui-dropdown · 手写下拉
- waterfall · 瀑布流
- swr-waterfall · SWR 加载更多
04
数据获取与缓存
fetch 缓存、四层缓存、revalidate、静态 vs 动态
- fetch-default · 不缓存
- fetch-cache · 数据缓存
- revalidate-time · 时间刷新
- revalidate-tag · 标签失效
- unstable-cache · 非 fetch 缓存
- static-vs-dynamic · 静态动态对比
05
Server Actions
'use server' 原理、渐进增强
- form-basic · form action
- use-action-state · 表单状态
- event-handler · 事件调用
- vs-api-route · 与 API Route 对比
- with-revalidate · 联动缓存
06
性能 / 部署 / 工程化
next/image、流式渲染、next build
- image · 图片优化
- streaming · 流式渲染
- dynamic · 动态导入
- build · 读 build 产物
07
登录状态
Firebase、Next 后端、业务后端之间的登录态泳道图
- admin-cookie · SSR 会话
- existing-backend · 复用后端
- forward-token · 折中胶水层
- optimistic-token · 乐观缓存
根 layout 的主题处理
根 src/app/layout.tsx 不再使用 cookies() 动态 API； 主题由 head 内联脚本在水合前同步到 html[data-theme]， 因此渲染模式实验页可以更干净地观察 SSG / ISR / SSR 的差异。