サーバーサイドレンダリング (SSR)

「SSR」または「ダイナミックレンダリング」とも呼ばれます。

ページで サーバーサイドレンダリング (SSR) を使用する場合、ページのHTMLは 各リクエストごとに 生成されます。

ページでサーバーサイドレンダリングを使用するには、getServerSideProps という名前の async 関数を export する必要があります。この関数はサーバーによって毎回のリクエスト時に呼び出されます。

例えば、ページが頻繁に更新されるデータ（外部APIから取得）をプリレンダリングする必要があるとします。以下のように、このデータを取得して Page に渡す getServerSideProps を記述できます:

export default function Page({ data }) {
  // データをレンダリング...
}

// この関数は毎リクエストごとに呼び出されます
export async function getServerSideProps() {
  // 外部APIからデータを取得
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // propsを介してページにデータを渡す
  return { props: { data } }
}

ご覧の通り、getServerSideProps は getStaticProps と似ていますが、違いは getServerSideProps がビルド時ではなく毎リクエストごとに実行される点です。

getServerSideProps の動作について詳しく知りたい場合は、データ取得のドキュメントをご覧ください。