Payload/Next JS tag-based revalidation

[NardiniA]

Will Payload CMS support tag-based revalidation in Next JS, if it is possible. I use tag-based ISR because it means less load on my server and provides a better experience for my editors. However, I cannot find a way to support this with Payload v3.

If anyone has suggestions besides time-based revalidation, I would always be happy to hear it. I think Sanity supports it but I have a feeling that Sanity uses a rest api and therefore some form of HTTP request.

What does everyone else think?

[andershermansen]

We us a revalidate hook that we put on the collections.

On payload side:

const revalidate = async (tags: string[]): Promise<void> => {
    if (!process.env.REVALIDATE_CACHE_URL || !process.env.REVALIDATE_CACHE_SECRET_TOKEN) {
        return;
    }

    for (const tag of tags) {
        await fetch(process.env.REVALIDATE_CACHE_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                secret: process.env.REVALIDATE_CACHE_SECRET_TOKEN,
                tag
            }),
        });
    }
};

And you put it in a collection like this:

    hooks: {
        afterChange: [
            ({ doc }) => revalidate(['mytag1', 'mytag2']),
        ],
    },

On the nextjs side you create a API route like this:

import { revalidateTag } from 'next/cache';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function POST(request: NextRequest): Promise<Response> {
    const { secret, tag } = await request.json();

    if (typeof secret !== 'string') {
        return NextResponse.json({ message: 'Missing secret' }, { status: 400 });
    }
    if (secret !== process.env.REVALIDATE_CACHE_SECRET_TOKEN) {
        return NextResponse.json({ message: 'Invalid secret' }, { status: 401 });
    }

    if (typeof tag !== 'string') {
        return NextResponse.json({ message: 'Missing or invalid tag param' }, { status: 400 });
    }
    revalidateTag(tag);

    return NextResponse.json({ revalidated: true, now: Date.now() });
}

And wherever you do the fetch call in nextjs frontend to your payload cms backend you have to put the tag as well:

await fetch(url, { next: { tags: ['mytag1'] } });

On payload side you need REVALIDATE_CACHE_URL to be the url to the API route on nextjs side.
And you need REVALIDATE_CACHE_SECRET_TOKEN to be same on both payload and nextjs side.

This is our solution for when the payload cms and the frontend runs on different sites.

[jmikrut]

We are going to bring this in to first-party support, but @sannajammeh made a pretty shiny plugin for this:

https://github.com/sannajammeh/payload-next-cache

Check it out!