Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

サーバーサイドレンダリング (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 } }
}

ご覧のとおり、getServerSidePropsgetStaticPropsに似ていますが、ビルド時ではなく、各リクエストで実行される点が異なります。

getServerSidePropsの動作の詳細については、データフェッチングのドキュメントをご確認ください。