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

"SSR"または"Dynamic Rendering"とも呼ばれます。

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