getStaticProps の詳細

getStaticProps について知っておくべき重要な情報です。

外部 API のフェッチまたはデータベースのクエリ

lib/posts.js では、ファイルシステムからデータをフェッチする getSortedPostsData を実装しました。ただし、外部 API エンドポイントなどの他のソースからデータをフェッチすることもでき、問題なく動作します。

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  return res.json();
}

注: Next.js は、クライアントとサーバーの両方で fetch() をポリフィルします。インポートする必要はありません。

データベースを直接クエリすることもできます。

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

これは、getStaticProps がサーバーサイドでのみ実行されるためです。クライアントサイドでは決して実行されません。ブラウザ用の JS バンドルにも含まれません。つまり、ブラウザに送信されることなく、データベースの直接クエリなどのコードを記述できます。

開発環境と本番環境

• 開発環境（npm run dev または yarn dev）では、getStaticProps はすべてのリクエストで実行されます。
• 本番環境では、getStaticProps はビルド時に実行されます。ただし、fallback キーを使用してこの動作を拡張できます。これは、getStaticPathsから返されます。

ビルド時に実行されることを意図しているため、クエリパラメータや HTTP ヘッダーなど、リクエスト時にのみ使用可能なデータを使用することはできません。

ページでのみ許可

getStaticProps はページからのみエクスポートできます。ページ以外のファイルからエクスポートすることはできません。

この制限の理由の1つは、React がページをレンダリングする前に必要なすべてのデータを持っている必要があるためです。

リクエスト時にデータをフェッチする必要がある場合はどうすればよいですか？

静的生成はビルド時に1回行われるため、頻繁に更新されるデータやユーザーのリクエストごとに変化するデータには適していません。

データが変更される可能性が高いこのような場合は、サーバーサイドレンダリングを使用できます。次のセクションでサーバーサイドレンダリングについて詳しく学びましょう。