该技能是面向 Next.js 14+ App Router 的惯用模式参考指南，用于构建页面、布局与数据流，以发挥服务端组件、流式渲染和缓存系统的能力。
用途：在开发 Next.js 应用时提供组件边界、数据获取、缓存与路由结构的决策参考。
主要能力：
- 服务端与客户端组件决策树：涉及浏览器 API、事件监听、useState/useEffect/useRef 或自定义 Hook 的组件标记 "use client"；仅做数据获取与渲染或静态内容的组件用服务端组件（默认）。核心原则是把 "use client" 下沉到尽可能低的交互叶子节点。
- 数据获取：服务端组件直接 async 调用数据库或 API；用 Promise.all 并行获取避免瀑布流；用 React cache 配合 preload 模式提前启动深层组件的数据获取。
- 缓存策略：同一渲染中相同 URL 的 fetch 自动去重；支持基于时间的 revalidate、revalidatePath/revalidateTag 按需再验证、cache: "no-store" 退出缓存，以及路由段配置 dynamic 和 revalidate。
- 流式渲染：用 Suspense 包裹慢组件，配 loading.tsx 文件约定自动创建边界。
- 路由：并行路由用 @folder 在同一布局同时渲染多个页面；拦截路由用 (.) 语法在模态中展示路由并保留背景页。
- 错误边界：error.tsx 必须为客户端组件，接收 error 与 reset 参数。
注意事项：避免给所有组件加 "use client"、在服务端可行时仍用客户端获取数据、误解缓存默认行为（生产环境服务端 fetch 默认缓存、POST 不缓存、动态函数会使整条路由退出静态渲染）、忽视布局复用。