In this story, I will guide you through the possibilities of caching and revalidation in Nextjs 14. As in our previous stories, I will use Contentful as a headless CMS for content management. Caching is crucial for providing a fast website, but since new content is coming in, we need a suitable revalidation strategy, which depends on your use case.
The complete code is available in this GitHub repo.
There are four Cache Scenarios in Next.js 14:
The default behavior is to cache the data (vales from the fetch return) in the Data Cache on the Server forever (SSG — Static Site Generation)
No cache or opting out of Data Caching (Dynamic fetch)
Time-based revalidation
On-demand revalidation
Example for default behavior (1)
Example for “No Cache” (2)
fetch requests are not cached if:
The cache: 'no-store' is added to fetch requests.
The revalidate: 0 option is added to individual fetch requests.
The fetch request is inside a Router Handler that uses the POST method.
The fetch request comes after the usage of headers or cookies.
The const dynamic = 'force-dynamic' route segment option is used.
The fetchCache route segment option is configured to skip cache by default.
The fetch request uses Authorization or Cookie headers, and there's an uncached request above it in the component tree.
Example of “Time-based revalidation”
you can use the “next.revalidate” fetch option to set the cache TTL in seconds
If you want to revalidate all “fetch requests” in a route segment, like for all blog posts in a blog, you can use the Segment Config Options in the layout.tsx or page.tsx file
Example of “On-demand revalidation”
There are two possibilities for on-demand revalidation:
by path (revalidatePath)
by tag (revalidateTag)
On the search result page (“src/app/[locale]/search/[searchTerm]”), you will find an example regarding “no-cache” on line 37
On the sitemap.ts file, you will find an example regarding time-based validation: “export const revalidate = 24 * 60 * 60; // revalidate at most every hour” on line 57.
For on-demand revalidation, I added two new API Routes (revalidatetag and revalidatepath).
For security reasons, I added a secret at the beginning of the routes so that not everybody can call the endpoints.
Contentful webhook for Cache refresh with revalidatepath
We will use the slug attribute in our content entry to post the data to our new revalidatepath endpoint, which takes care of the cache refresh.
Below is the code for the route “revalidatepath”
For the “revalidatetag endpoint”, I recommend a Postman integration or custom integration for your project.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
Please consider clapping and following the writer! 👏 on our Medium Account
