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

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

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

ページにサーバーサイドレンダリングを使用するには、getServerSidePropsと呼ばれる非同期関数（async function）を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の動作の詳細については、データ取得ドキュメントをご覧ください。