如何清除/删除NextJs缓存？

Question

我在/products/[slug]上有一个产品页面。js

我对wordpress/graphql站点使用增量静态生成：

export async function getStaticProps(context) {

    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    return {
        props: {
            categoryName: data?.productCategory?.name ?? '',
            products: data?.productCategory?.products?.nodes ?? []
        },
        revalidate: 1
    }

}

export async function getStaticPaths () {
    const { data } = await client.query({
        query: PRODUCT_SLUGS,
    })

    const pathsData = []

    data?.productCategories?.nodes && data?.productCategories?.nodes.map((productCategory) => {
        if (!isEmpty(productCategory?.slug)) {
            pathsData.push({ params: { slug: productCategory?.slug } })
        }
    })

    return {
        paths: pathsData,
        fallback: true,
    }
}

除了一件事，一切都按预期进行。如果我从wordpress中删除一个以前发布的产品，NextJs服务于缓存的页面，而不是显示404-未找到页面，我认为这是它应该如何工作，这意味着如果某些东西没有重建，显示以前的（陈旧的）页面。

但是，如何才能完全删除已删除的特定产品的缓存，而该缓存不会再次从product\u SLUGS查询中获取？

我已经阅读了回退选项：真、假、阻塞，但它们似乎都不起作用。

有没有解决这个问题的方法，或者是next.config.js配置，或者是其他方法？

Answer 1

所以我遇到了同样的问题，尽管我使用的是GraphCM。因此，以下是您需要执行的修复操作：

    export async function getStaticProps(context) {
    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    if (!data) {
        return {
            notFound: true
        }
    } else {
        return {
            props: {
                categoryName: data?.productCategory?.name ?? '',
                products: data?.productCategory?.products?.nodes ?? []
            },
            revalidate: 1
        }
    }
}

您需要在getStaticProps

notFound-一个可选的布尔值，允许页面返回404状态和页面。

请参阅文档中的此页https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-静态生成

然后在getStaticPaths中将fallback更改为fallback:“阻塞”。如果您保持fallback:true，它将提供过时的页面，因为该页面已成功构建。