サーバーサイドレンダリング (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 } }
}
ご覧のとおり、getServerSideProps
はgetStaticProps
に似ていますが、ビルド時ではなく、各リクエストで実行される点が異なります。
getServerSideProps
の動作の詳細については、データフェッチングのドキュメントをご確認ください。