例えば、ECサイトで商品が1000個ある時、
propducts/[item]をSSGで静的にHTMLで作ります。[item]は何が来るかわからないので空で作られています。
骨格はpre-renderingになっていますが、[item]は動的に作られてSSRみたいに作られて送られます。
ここで、商品があまりもなくてまたは人気商品とか先に作り時は generateStaticParams()を使います。
type Props = {
params: {
item: string;
}
}
export default function Product({ params }:Props) {
return <h1>{params.item}</h1>
}
export function generateStaticParams() {
const products = ["t-shirt", "pants"];
return products.map((product) => ({
item: product,
}));
}
- 先にレンダリングしたいitemのnameを決めます。(先に経路を作りたい)
- mapでそれぞれのアイテムをラッピングした後、paramsに入る形にしてくれる(item:product)
- returnする
ビルドしたら products が静的にレンダリングされているのが確認できます。
○ (Static) prerendered as static content
→自動的に静的に作ってくれる
● (SSG) prerendered as static HTML (uses getStaticProps)
→動的に作られたが、props形で与えたのである
Discussion