如何清除/删除NextJs中的缓存？ [英] How to clear/delete cache in NextJs?

问题描述

我在/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 - Not found页面，我认为这就是它的工作方式，这意味着如果某些内容没有重建，则显示上一个(陈旧)页面。

但是，如何才能完全删除已删除且不会再次从PRODUCT_SLUGS查询中提取的特定产品的缓存？

我已阅读fallback选项：true, false, blocking，但它们似乎都不起作用。

此问题是否有解决方案，可以是next.config.js配置或其他解决方法？

推荐答案

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

    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: true

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

在文档中查看此页https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

然后在getStaticPaths中将回退更改为fallback: "blocking"。如果您保留fallback: true，它将服务于旧页，因为该页已成功生成。

这篇关于如何清除/删除NextJs中的缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！