Server-side Rendering (SSR)

"SSR" または "Dynamic レンダリング" とも呼ばれます。

ページがServer-side Renderingを利用している場合、そのページの HTML は毎回の requestごとに生成されます。

ページで Server-side Rendering を使用するには、getServerSidePropsと呼ばれるasync関数をexportする必要があります。この関数は、server によって毎回 request で呼び出されます。

例えば、あなたのページが頻繁に更新されるデータ(外部の 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が request ごとに実行されるのに対し、build 時ではないことです。

getServerSidePropsがどのように動作するかを詳しく知りたい場合は、Data Fetching documentationをご覧ください。