RSCでデータ取得を磨け！キャッシュとストリーミングを制する

React Server Components（RSC）はデータフェッチをサーバー側に移行し、クライアントのウォーターフォールを排除、バンドルサイズを削減します。

主要パターン:

• 直接fetch：サーバーコンポーネント内でuseEffect不要。
• キャッシュ：React.cache()でリクエストを重複排除。
• ストリーミング：Suspenseと組み合わせてプログレッシブレンダリング。

Next.js App Routerでは、asyncなサーバーコンポーネント内で直接fetchします。レンダー間のメモ化にはunstable_cacheを使用します。

例:

// app/page.tsx
async function Page() {
  const data = await fetch('https://api.example.com/data');
  return 
{await data.json()}
;
}

Suspenseと組み合わせてストリーミング：遅いコンポーネントを<Suspense>境界でラップします。