コンテンツへスキップ
アプリケーションの構築レンダリングサーバーサイドレンダリング (SSR)

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