Bram.

Cachen, of niet?

Next.js revalidation
Profielfoto van Bram
Bram Doppen

Headless websites zijn fantastisch. Door alle nieuwe technieken is het eenvoudig om pagina's statisch te genereren en deze te cachen waardoor ze razendsnel laden. De blog waar je dit artikel op leest is als een malle gecached. Maar in de praktijk passen we vaak geen caching toe.

Welke caching mogelijkheden bedoel ik?

De stack: headless CMS Sanity in combinatie met een Next.js front-end.

Next.js biedt verschillende manieren om te cachen, in de app router is het standaard als volgt: Wanneer je een fetch request aanroept, wordt deze op het moment dat jouw applicatie gebuild wordt automatisch gecached en gebruikt wanneer de gebruiker naar jouw pagina gaat.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data

Sanity biedt de mogelijkheid om de content in te laden via een CDN-API, of een normale API. Die laatste heeft de actueelste content.

In de praktijk

Stel: In het CMS update ik de titel van een pagina. Wanneer zowel Next.js als Sanity een vorm van caching toepassen is het lastig om precies te zeggen wanneer de nieuwe titel zichtbaar wordt voor de website bezoeker.

Sanity biedt gelukkig een live-preview mogelijkheid waarmee je als CMS editor je wijzigingen direct ziet. Maar we merkten dat de editor zich alsnog afvraagt wanneer de wijziging zichtbaar wordt.

Bij websites waar de content vaak veranderd zetten we de revalidate in Next.js op 0. Dat forceert de front-end om de data altijd direct op te halen.

Ook kiezen we ervoor om standaard niet de CDN API van Sanity te gebruiken vanwege de dubbele caching. De CDN API is goedkoper dan de normale API bij veel requests, maar we blijven 99% van de gevallen binnen de gebruikslimieten van de normale API.

Lets talk stats:

Ik neem de FCP (first-contentful-paint) als uitganspunt. Volgens Google's pagespeed moet die tussen 0 en 1800ms zijn.

Met caching in Next.js (revalidate) komt de FCP op 355ms (gemiddeld over 3 pagina's).

Wanneer we geen caching gebruiken is de FCP 722ms (gemiddelde pagespeed over 3 websites). De CMS editor ziet na publish vrijwel direct de bijgewerkte content en de website laad nog steeds supersnel.