GetStaticPaths

公開日
2022-08-26
投稿者
Ryousuke Kamei
#tag

GetStaticPaths

ページの情報を取得した後、そのページにどれだけのpathがありうるかを導き出してそのPathの一覧を作る

export const getStaticPaths:GetStaticPaths = async () => {
    // responsePageに存在しうるpathの一覧を取得する
    const { results } = await responsePage({});
    const paths = results.map((page: any) => {
        return {
            params: {
                slug  : getText(page.properties.slug.rich_text),
            },
        };
    });
    return {
        paths: paths,
        fallback: "blocking",
    }
}

ISRを使う時は、FallBack:Blockingも一緒に


イメージとしてはISRによって新しく生成された値やページのデータが入る前、つまり入っていない段階でページのレンダリングが行なわれるのを防ぐためにFallBack:BlockingのBlockingによりfetch(データの取得)を待って取得して渡してレンダリングするとゆう流れ表示

使いどころ

ダイナミックルート([example].tsx)のページかつGetStaticPropsを使用しているときに使う