javascript frontend nextjs

Next.js a revalidace předgenerovaných stránek při změně obsahu

Jak regenerovat staticky předgenerované stránky jinak, než periodicky? Typicky při změně obsahu na API nebo CMS? Je tu funkce revalidate().

Next.js >=12.2 umožňuje invalidovat konkrétní dynamicky vygenerovanou stránku pomocí API routy. Next.js toto interně provede tak, že zneplatní původní cache daného souboru. Při následujícím dotazu na danou stránku však ještě vrátí původní verzi a až v tento moment začne na pozadí obsah regenerovat. Abychom tedy zajistili, že příští uživatel již dorazí na opravdu zregenerovanou stránku, můžeme provést dotaz na příslušnou stránku sami. V případě selhání revalidace bude Next.js nadále vracet původní verzi z cache a není třeba se tak bát, že by stránka nebyla nadále dostupná.

Konkrétní řešení je vhodné doplnit i kontrolu validnosti requestu pro zabezpečení proti případnému zneužití. Toho lze dosáhnout i jednoduchým porovnáním klíče poslaného v query parametru s předem definovaným klíčem např. v .env souboru. Následně pak již lze provést revalidaci zadané cesty. 

export default async function (req: NextApiRequest, res: NextApiResponse) {
    if (req.query.secret !== process.env.REVALIDATE_TOKEN) {
        return res.status(401).json({message: 'Invalid token'});
    }

    try {
        await res.revalidate('/article-2');
        await fetch('http://localhost/article-2');
        return res.json({revalidated: true});
    } catch (err) {
        return res.status(500).json({revalidated: false, error: err});
    }
}

Důležité upozornění je to, že revalidace pracuje pouze na doméně, na které jste ji volali. V případě, že používáte domén více (např. kvůli lokalizaci), je třeba zavolat revalidaci pro každou z nich.