Next.js App Router：该用，但要用对

RSC、Streaming、缓存策略是核心，不是语法糖。

先记住三件事

默认是 Server Components。
use client 是显式边界，不是随便加。
数据缓存策略决定性能上限。

一个典型目录结构

app/
  layout.tsx
  page.tsx
  blog/
    [slug]/
      page.tsx

数据获取策略

// app/blog/[slug]/page.tsx
export const revalidate = 60

export default async function Page({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 60 }
  }).then(r => r.json())
  return <article>{post.title}</article>
}

ISR 用 revalidate。
强一致 用 cache: 'no-store'。

常见坑

在 Server Component 里用浏览器 API 会直接报错。
组件树里混用 use client 会导致 bundle 膨胀。

结论

App Router 是更现代的渲染模型，但你必须先理解 数据流和缓存，否则只是换了语法而已。