Open1
Server-side Rendering (SSR)
あおけんページがサーバーサイド・レンダリングを使用している場合、
ページのHTMLはリクエストごとに生成される。
ページにサーバサイド・レンダリングを使用するには、
getServerSidePropsという非同期関数をエクスポートする必要がある。
この関数は、リクエストごとにサーバーから呼び出される。
例えば、頻繁に更新されるデータ(外部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の動作の詳細については、
データ・フェッチのドキュメントを確認。