Next.js データフェッチング
サーバーサイドレンダリング（SSR）、静的生成（SSG）、インクリメンタル静的再生成（ISR）、ストリーミング
24 面接問題·
Mid-Level
1Next.js App RouterのServer Componentsにおけるデータフェッチのデフォルト動作は何ですか？
1
Next.js App RouterのServer Componentsにおけるデータフェッチのデフォルト動作は何ですか？
回答
Server Componentsはデフォルトでリクエストごとにサーバー側でデータフェッチを行い、常に新鮮なデータを確保します。getServerSidePropsが必要だったPages Routerとは異なり、Server ComponentsはSSRを暗黙的に行います。静的キャッシュには、fetchにcache: 'force-cache'オプションを追加する必要があります。
2Pages RouterのgetStaticPropsと同等のfetchキャッシュオプションはどれですか？
2
Pages RouterのgetStaticPropsと同等のfetchキャッシュオプションはどれですか？
回答
cache: 'force-cache'オプションはNext.jsに手動で無効化されるまでレスポンスをキャッシュするよう指示し、getStaticPropsと同等です。この戦略は無期限にキャッシュされる静的コンテンツを生成します。'no-store'オプションはgetServerSideProps（リクエストごとに再フェッチ）と等しく、next.revalidateはrevalidate付きのgetStaticProps（ISR）と等しいです。
3リクエストごとに動的なデータフェッチを強制する方法は（getServerSidePropsと同等）？
3
リクエストごとに動的なデータフェッチを強制する方法は（getServerSidePropsと同等）？
回答
cache: 'no-store'オプションはキャッシュを完全に無効化し、リクエストごとに再フェッチを強制します（getServerSidePropsと同等）。この戦略は常に新鮮なデータを保証しますが、レイテンシを増加させます。鮮度が重要なリアルタイムデータ（ダッシュボード、通知、ライブ価格）に使用します。
4
1時間ごとの再検証でISR（インクリメンタル静的再生成）を実装する方法は？
5
ページレベルでの'export const revalidate = 60'エクスポートは何をしますか？
+21 面接問題
その他のReact / Next.js面接トピック
JavaScript の基礎
Junior
25問React の基礎
Junior
20問React Hooks
Junior
22問コンポーネントのライフサイクル
Junior
18問React Router
Junior
20問Contextを使った状態管理
Junior
18問フォームと Controlled Components
Mid-Level
20問データ取得と API
Mid-Level
20問React Query (TanStack Query)
Mid-Level
20問Styling & CSS-in-JS
Mid-Level
18問Next.jsの基礎
Mid-Level
25問TypeScriptとReact
Mid-Level
20問Next.js Server Actions
Mid-Level
20問Next.jsのルーティングとナビゲーション
Mid-Level
22問Next.js API Routes
Mid-Level
20問Next.js Metadata & SEO
Mid-Level
18問Next.js の Middleware と Auth
Mid-Level
22問React テスト
Mid-Level
20問Zustand State Management
Mid-Level
18問React パフォーマンス最適化
Senior
22問Error Boundaries & エラーハンドリング
Senior
18問Advanced React Patterns
Senior
20問Next.jsの高度な機能
Senior
24問Next.jsのデプロイメントと本番環境
Senior
20問アーキテクチャ & デザインパターン
Senior
22問React Server Components
Senior
26問Next.js の国際化
Senior
20問React セキュリティ & ベストプラクティス
Senior
22問