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

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

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

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

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

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 の動作についてさらに学びたい場合は、データ取得のドキュメントをご覧ください。