getStaticProps の詳細

getStaticProps について知っておくべき重要な情報を以下に示します。

外部APIの取得またはデータベースのクエリ

lib/posts.js では、ファイルシステムからデータを取得する getSortedPostsData を実装しました。しかし、外部APIエンドポイントなど他のソースからデータを取得することも可能です:

export async function getSortedPostsData() {
  // ファイルシステムの代わりに、
  // 外部APIエンドポイントから投稿データを取得
  const res = await fetch('..');
  return res.json();
}

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

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

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // ファイルシステムの代わりに、
  // データベースから投稿データを取得
  return databaseClient.query('SELECT posts...')
}

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

開発環境と本番環境

• 開発環境 (npm run dev または yarn dev) では、getStaticProps は_リクエストごとに_実行されます。
• 本番環境では、getStaticProps は_ビルド時に_実行されます。ただし、この動作は getStaticPaths によって返される fallback キー を使用して拡張できます。

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

ページでのみ許可

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

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

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

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

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