サーバーサイドレンダリング (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の動作の詳細については、データフェッチングのドキュメントをご確認ください。