SSG
ビルド時にDOMを生成する。(事前生成、プレレンダリング)
SSR
Propsによって変更があるときなど、サーバーサイドで都度(読み込みのたび)レンダリングする
ISR
revalidateを追加することによって、SSGとSSRの中間のような動きができるようになる。
（完全リアルタイムではないが、10秒に一回更新fetchがかかりビルドされる）
export const getStaticProps: GetStaticProps = async () => {
const { results } = await fetchPages();
return {
props: {
pages: results ? results : [],
},
revalidate: 10,
};
};
GetStaticPaths
ダイナミックルーティングでGetStaticPropsを使用する場合は、パスの種類が多岐(無限)になるので、どれだけのパスが存在するのか事前に知らせる必要がある。
それが、GetStaticPaths.
params の中のオブジェクトのキーには、pages の中で記述した角カッコの中のものを記述する。
今回は、[sulg].tsx と記述したので、キーは下記のようにslugとなる。
export const getStaticPaths: GetStaticPaths = async () => {
// 全投稿を取得
const { results } = await fetchPages({});
// 全投稿を map して、各投稿の slug を return
const paths = results.map((page: any) => {
return {
params: {
slug: getText(page.properties.slug.rich_text),
},
};
});
// paths (オブジェクト)と fallback を返す。返した slug を元にページが事前生成される。
return {
paths,
fallback: "blocking",// プレレンダリングを blocking する
};
};
fallback: "blocking"の機能とは、プレレンダリングするさいに、データの取得を待ってからプレレンダリングを指示する。blockingしないと、DOM の内容に Props が反映されない状態でプレレンダリングされてしまう。(空の DOM が生成される)
pramsは、下記のような形のオブジェクトの配列となる。
[
{
prams: {
id: "xxxxx",
},
},
{
prams: {
id: "yyyy",
},
},
];
