チャプター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 がページがレンダリングされる前に必要なすべてのデータを持っている必要があることです。

リクエスト時にデータを取得する必要がある場合は？

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

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