NextJs에서 캐시를 지우거나 삭제하는 방법

NextJs에서 캐시를 지우거나 삭제하는 방법

제품 페이지가 있습니다./products/[slug].js

워드프레스/그래픽ql 사이트에 대해 증분 정적 생성을 사용합니다.

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,
    }
}

한 가지만 빼고는 모든 것이 예상대로 된다.이전에 게시된 워드프레스에서 제품을 삭제하면 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
        }
    }
}

다시 돌아와야 해notFound: true에getStaticProps

notFound- 페이지가 404 상태 및 페이지를 반환할 수 있도록 하는 선택적 부울 값입니다.

문서 https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation 에서 이 페이지를 참조해 주세요.

그럼 인getStaticPaths로 되돌아가다fallback: "blocking"당신이 계속한다면fallback: true정상적으로 빌드된 이후 오래된 페이지를 처리합니다.

이 기능은 next@12.1.x부터 on-demand incremental static regeneration https://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 경로를 사용하여 특정 제품의 캐시를 비활성화할 수 있습니다.

언급URL : https://stackoverflow.com/questions/68444505/how-to-clear-delete-cache-in-nextjs