用途：该资料汇总现代 Next.js 16+ 开发的三种核心架构模式，用于提升性能、可维护性与代码组合。前置条件：Next.js 16+，并在 next.config.ts 中启用 cacheComponents: true。
一、数据获取同址化：把异步数据获取直接放进消费数据的 Server Component，避免多层 prop drilling、根布局被大量初始请求阻塞，以及组件因依赖特定父级 props 而不可复用。可将 Promise 直接传给 Client Component，再用 React.use() 解包，配合 Suspense 显示回退。反模式包括在页面层取全部数据再层层传递、对可服务端获取的数据使用 useEffect + useState、重复复制获取逻辑。
二、Donut 模式：在页面局部加入交互，同时保持嵌套内容由服务端渲染，避免为小组件把整棵大树标记为 use client。做法是把交互逻辑抽成 Client Component 作为“甜甜圈”，用 children 接收服务端组件并在服务端组合。好处是减小打包体积、内层组件仍可 async 取数、外层处理客户端交互。反模式是为一个点击处理器把整页设为 use client、在客户端组件中做本可服务端完成的取数。
三、use cache 缓存组件：可在同一路由混合静态、缓存与动态内容。构建时无网络或请求数据的组件自动静态；需要 request 数据（cookies、headers、用户相关）的用 Suspense 包裹，昂贵但静态或共享的加 "use cache"，两者兼有则组合模式。支持文件级与函数级缓存，用 cacheLife() 预设 profile 控制生命周期（seconds、minutes、hours、days、weeks、max），可用条件化缓存时长；用 cacheTag() 打标签，在 Server Actions 中用 updateTag() 立即失效（read-your-own-writes），在 Route Handlers、webhooks 中用 revalidateTag(). 反模式：用 export const revalidate、dynamic、fetchCache 等旧配置，改为 cacheLife() 与 "use cache"；不要在缓存作用域内读 cookies/headers，应在外部读取后作为参数传入。
四、组合模式与 Suspense：给出电商产品页示例，产品详情加缓存、购物车按钮用 Donut、推荐商品缓存并流式输出。缓存组件通常无需 Suspense，动态数据、流式异步 Server Component、含 use() 的 Client Component 需要。建议用细粒度而非粗粒度边界，让各组件独立并行加载。
五、调试：开发中 Next.js 会输出 CACHE HIT、CACHE MISS、CACHE SKIP。常见问题包括组件未缓存（读到请求数据）、变更后数据陈旧（缺少标签失效）、水合不匹配（缓存组件含日期时间，改用 cacheLife("seconds") 或移到客户端）、use cache 构建报错（不支持 Edge runtime，仅 Node.js）。可用 next build 查看 ○ 静态、● 带动态参数的 SSG、ƒ 动态、◐ 部分预渲染。
限制与未提供信息：资料未说明适用平台细节、收费或价格，也未提供除上述 API 与配置外的其他功能说明；某些函数细节需参考官方文档。