Wie lösche/lösche ich den Cache in NextJs?

Lesezeit: 2 Minuten

Ich habe eine Produktseite unter /products/[slug].js

und ich verwende Incremental Static Generation für eine WordPress/Graphql-Site:

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

Alles funktioniert wie erwartet, bis auf eine Sache. Wenn ich ein zuvor veröffentlichtes Produkt aus WordPress lösche, stellt NextJs die zwischengespeicherte Seite bereit, anstatt sie anzuzeigen 404 - Not found Seite, und ich denke, so sollte es funktionieren, was bedeutet, dass, wenn etwas nicht neu erstellt wird, die vorherige (veraltete) Seite angezeigt wird.

Aber wie kann ich den Cache für ein bestimmtes Produkt, das gelöscht wurde und nicht erneut abgerufen wird, vollständig entfernen? PRODUCT_SLUGS Anfrage ?

Ich habe die gelesen fallback Optionen: true, false, blocking aber keiner von ihnen scheint zu funktionieren.

Gibt es dafür eine Lösung, entweder a next.config.js Konfiguration oder eine andere Problemumgehung?

  • Dies scheint eine beliebte Frage zu sein. Sie können diese Threads überprüfen (nicht sicher, ob sie für Sie funktionieren): How to clear NextJs GetStaticPaths cache / “unpublish” a dynamic route?, Next.js ISR-Seite wird nicht gelöscht, nachdem sie im CMS gelöscht wurde. PS: Ich habe gerade gesehen, dass Sie eine Antwort auf einen von ihnen gepostet haben. Erwägen Sie, Ihre Frage zugunsten der dort vorhandenen Antworten zu schließen.

    – brc-dd

    19. Juli 2021 um 18:24 Uhr


Also bin ich auf dasselbe Problem gestoßen, obwohl ich GraphCMS verwende. Hier ist also, was Sie tun müssen, um das Problem zu beheben:

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

Sie müssen zurückkehren notFound: true in getStaticProps

notFound – Ein optionaler boolescher Wert, damit die Seite einen 404-Status und eine Seite zurückgeben kann.

Siehe diese Seite in den Dokumenten https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

Dann in getStaticPaths Fallback ändern auf fallback: "blocking". Wenn du bleibst fallback: true Es wird die veraltete Seite bedienen, da diese erfolgreich erstellt wurde.

922990cookie-checkWie lösche/lösche ich den Cache in NextJs?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy