wordpress 如何在NextJs中清除/删除缓存？

mv1qrgav 于 2023-05-16 发布在 WordPress

关注(0)|答案(3)|浏览(129)

我在/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配置或其他解决方案？

wordpress

来源：https://stackoverflow.com/questions/68444505/how-to-clear-delete-cache-in-nextjs

3条答案

按热度按时间

bybem2ql1#

所以我遇到了同样的问题，尽管我使用的是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状态和页面。
请参阅文档www.example.com中的此页https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
然后在getStaticPaths中将回退更改为fallback: "blocking"。如果您保留fallback: true，它将提供旧页面，因为它已成功构建。

赞(0）回复(0）举报 2023-05-16

avwztpqn2#

我认为从next@12.1.x开始使用此功能按需增量静态再生https：//www.example.com是可能nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta
基本上你可以用这种方式定义一个API路径

// 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路径可以使特定产品该高速缓存失效

赞(0）回复(0）举报 2023-05-16

rqdpfwrv3#

要清除Next.js应用中该高速缓存，请执行以下步骤：
1.停止开发服务器或任何正在运行的Next.js进程。
1.找到Next.js项目的根目录。
1.删除.next目录。您可以使用命令行或文件资源管理器执行此操作。