Next.js Discord

Discord Forum

Using revalidate=0 on a PPR page

Answered
Munchkin posted this in #help-forum
Open in Discord
MunchkinOP
Hey all, does anyone know if it’s possible to not cache the dynamic parts of a page with PPR enabled? If I try to do export const revalidate = 0, it seemingly disables PPR for that page and it builds it as a normal serverless function.
Answered by Munchkin
I found a sort-of work around, by refactoring the suspense section into a seperate component and using the unstable_nostore in it, I'm able to get a partially static page with true dynamic data. It feels more like a workaround than a solution though, hopefully this is addressed before PPR makes it to stable.

import { unstable_noStore as noStore } from "next/cache";

export default function EquipmentPage() {
    return (
        <div className="container">
            <div className="flex lg:justify-between pt-[21px] lg:items-center pb-6 lg:flex-row flex-col lg:gap-0 gap-4">
                <h1>Equipment</h1>
                <EquipmentModal />
            </div>
            <Suspense fallback={<LoadingTable />}>
                <EquipmentTable />
            </Suspense>
        </div>
    );
}

async function EquipmentTable() {
    noStore();
    const equipment = await getEquipment();
    return <DataTable columns={columns} data={equipment} />
}
View full answer

5 Replies

Z4NR34L
You can follow https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config and set
export const dynamic = 'force-dynamic'
MunchkinOP
that seems to also disable PPR. Maybe a bug since it's still experimental?
Z4NR34L
PPR is currently not even experimental - it's a feature preview which still have some problems, I hope they will be fixed soon, as I'm waiting for this feature too! 😄
Z4NR34L
If you consider this case as closed, please mark messege that solves it: right click > apps > mark solution. Happy Coding!
MunchkinOP
I found a sort-of work around, by refactoring the suspense section into a seperate component and using the unstable_nostore in it, I'm able to get a partially static page with true dynamic data. It feels more like a workaround than a solution though, hopefully this is addressed before PPR makes it to stable.

import { unstable_noStore as noStore } from "next/cache";

export default function EquipmentPage() {
    return (
        <div className="container">
            <div className="flex lg:justify-between pt-[21px] lg:items-center pb-6 lg:flex-row flex-col lg:gap-0 gap-4">
                <h1>Equipment</h1>
                <EquipmentModal />
            </div>
            <Suspense fallback={<LoadingTable />}>
                <EquipmentTable />
            </Suspense>
        </div>
    );
}

async function EquipmentTable() {
    noStore();
    const equipment = await getEquipment();
    return <DataTable columns={columns} data={equipment} />
}
Answer