
| 戦略(クリックで移動) | 場所 | 使用するタイミング | 長所 | 短所 |
|---|---|---|---|---|
| Server Componentsでfetch | app/page.tsx、app/layout.tsxなど | HTML生成前 | 高速な表示、SEOに有利 | 動的な操作には不向き |
| Client ComponentsとuseEffect | 'use client'コンポーネント | マウント後 | 操作後の取得が可能 | 初回表示が遅くなる場合がある |
| SWRまたはReact Query | Client Components | マウント後とキャッシュ | キャッシュ、再検証、再取得の自動化 | バンドルが増える可能性 |
| Route Handler(API) | app/api/** | APIの分離が必要な場合 | バックエンドとして使える | 追加設定が必要 |
| ISR(revalidate) | Server Components | キャッシュと再生成 | 更新性を補える | 一定時間はキャッシュを保つ |
| no-store | Server Components | 常に最新が必要な場合 | 毎回新たに取得 | 性能コストが増える |
revalidateで更新間隔を設定するfetch('https://api.example.com/docs', {
next: { revalidate: 3600 }, // 1시간마다 갱신
});const cookieStore = cookies();
const token = cookieStore.get('auth');
await fetch('https://api.example.com/user', {
headers: { Authorization: `Bearer ${token?.value}` },
});'use client';
const { data, mutate } = useSWR('/api/posts', fetcher);
// 사용자 액션 후 mutate()cache: 'no-store'を使うawait fetch('https://api.example.com/status', { cache: 'no-store' });fetchから、キャッシュ、SWR、Route Handler、キャッシュの無効化まで、実際の開発で必要なほぼすべての例を扱いました。
データ取得はReactと密接に関連するため、