チャプター26

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はビルド時に実行されます。ただし、この動作はgetStaticPathsによって返されるfallbackキーを使用することで強化できます。

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

ページ内でのみ許可

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

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

リクエスト時にデータをフェッチする必要がある場合は？

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

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