Next.js 16 App Router 实战：服务端组件的数据流设计

最近把一个中型项目完整迁到了 Next.js 16 的 App Router，服务端组件（RSC）带来的数据流变化比想象中大，记录一些落地后的体会。

数据获取内聚到组件

最大的心智转变：数据获取不再集中在页面顶层，而是内聚到每个服务端组件里。

// app/posts/[id]/page.tsx
export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await getPost(id); // 直接 await，没有 loading 状态

  return (
    <article>
      <PostBody post={post} />
      <Suspense fallback={<RepliesSkeleton />}>
        <Replies postId={id} /> {/* 慢查询拆出去流式渲染 */}
      </Suspense>
    </article>
  );
}

几个坑

1. params 变成了 Promise：Next.js 15+ 之后必须 await，老代码直接解构会拿到一个 Promise 对象。
2. 客户端组件边界要克制：能用服务端组件就不要加 'use client'，交互逻辑尽量下沉到叶子节点。
3. 缓存语义变了：fetch 默认不再缓存，需要显式声明 cache: 'force-cache' 或用 revalidate。

总结

RSC 不是银弹，但数据流内聚之后，页面的可维护性确实上了一个台阶。推荐大家从只读页面开始迁移，风险最小。

欢迎在评论区交流你们的迁移经验。