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

「SSR」または「動的レンダリング」とも呼ばれます。

ページがサーバーサイドレンダリングを使用する場合、ページHTMLは各リクエスト時に生成されます。

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

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

export default function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}

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

getServerSideProps の仕組みについて詳しくは、データ取得ドキュメントをご覧ください。