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