如何在 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_SLUGS查询中获取？

我已阅读fallback选项：true，false，blocking，但似乎都无法解决此问题。

有没有解决此问题的方法，或者使用next.config.js配置或另一种解决方法？

- entropyfeverone

---

这似乎是一个常见问题。您可以查看这些帖子（不确定它们是否适用于您）：[如何清除NextJs GetStaticPaths缓存/“取消发布”动态路由？]（https://dev59.com/c77pa4cB1Zd3GeqP7NhY），[在CMS中删除后，Next.js ISR页面未被删除]（https://dev59.com/01EG5IYBdhLWcg3wU6ZP）。附言：我刚看到你回答了其中一个问题。考虑关闭您的问题，以支持那里提供的答案。 - brc-dd

这在 Next.js v12.1 中现在是可能的。 请在此处查看我的答案 https://dev59.com/CcHqa4cB1Zd3GeqPtSWv#71559884 - David B

Answer 1

要清除Next.js应用程序中的缓存，请按照以下步骤操作:

1. 停止开发服务器或任何正在运行的Next.js进程。
2. 找到您的Next.js项目的根目录。
3. 删除 .next 目录。您可以使用命令行或文件资源管理器来完成此操作。

信息：一旦删除了 .next 目录，您可以启动 Next.js 开发服务器或重建项目，Next.js 将重新生成必要的缓存和构建内容。 请注意，删除 .next 目录将删除所有缓存数据和构建内容，这意味着 Next.js 需要在下次构建或服务器启动时重建项目并重新生成缓存。

- Sebastian Voráč

---

这非常有帮助，谢谢。 - AndrewLeonardi

@AndrewLeonardi 很高兴是这样的！干杯 - Sebastian Voráč MSc.

你救了我的命，兄弟！！！ - Hoang Lam

Answer 2

我遇到了同样的问题，尽管我使用的是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更改为fallback: "blocking"。如果您保持fallback: true，它将提供旧页面，因为该页面已经构建成功。

- Andrew Heinke

Answer 3

我认为从下一个版本12.1.x开始，使用“按需增量静态再生”功能是可能的。您可以在此处定义API路径。有关详细信息，请参见：https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta。

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
  const PRODUCT_SLUGS = req.query.product_slug;

  try {
    await res.unstable_revalidate(`/products/${PRODUCT_SLUGS}`)
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

使用此API路径，您可以使特定产品的缓存失效。

- dna