Next.jsにおけるデータフェッチング戦略

Next.jsは、プロジェクトの特性に応じて3つの主要なデータフェッチング戦略を提供しています：SSG（Static Site Generation）、SSR（Server-Side Rendering）、ISR（Incremental Static Regeneration）。これらは、ページのレンダリング方法やデータ取得のタイミングに応じて使い分けることができます。それぞれの特徴を理解することで、Webアプリケーションのパフォーマンスを最適化できます。

SSG（静的サイト生成）

SSGは、ビルド時にすべてのページを静的なHTMLとして生成し、それをユーザーに提供します。このため、リクエスト時のサーバー負荷が非常に少なく、高速な表示が可能です。SSGは、頻繁に更新されないコンテンツ（例：ブログ、ポートフォリオサイト、ドキュメントサイト）に最適です。

• メリット: 高速、SEOに強い、CDNキャッシュ対応。
• デメリット: ページの更新がビルド時に行われるため、動的なコンテンツには不向き。

SSGの実装例

export async function getStaticProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  
  return {
    props: { data }, // ビルド時にこのデータを取得
  };
}

SSR（サーバーサイドレンダリング）

SSRは、リクエストごとにサーバー側でHTMLを生成し、ユーザーに提供します。最新のデータを常に表示できるため、頻繁に更新されるコンテンツ（例：ニュースサイト、ダッシュボードなど）に適しています。ただし、リクエストごとにレンダリングが行われるため、SSGに比べてやや遅くなります。

• メリット: 常に最新のデータを取得可能、SEOに強い。
• デメリット: 毎回レンダリングが行われるため、サーバーへの負荷が大きい。

SSRの実装例

export async function getServerSideProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  
  return {
    props: { data }, // リクエストごとにこのデータを取得
  };
}

ISR（インクリメンタル静的再生成）

ISRは、SSGの静的な特性を活かしつつ、指定された時間ごとにページを再生成します。これにより、SSGの高速さを維持しながら、動的なコンテンツの鮮度を保つことができます。例えば、数分ごとに更新されるブログやニュースフィードに適しています。

• メリット: SSGのパフォーマンスを維持しつつ、定期的にデータを更新可能。
• デメリット: 完全にリアルタイムの更新には向いていない。

ISRの実装例

export async function getStaticProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  
  return {
    props: { data },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}

まとめ

Next.jsでは、SSG、SSR、ISRといったデータフェッチング戦略を適切に選ぶことで、アプリケーションのパフォーマンスやユーザー体験を最適化できます。静的なコンテンツにはSSG、リアルタイム性が必要なコンテンツにはSSR、動的で頻繁に更新されるコンテンツにはISRを使うと良いでしょう。