A practical guide shows how to build Prismic-powered marketing websites using Next.js Cache Components, an experimental caching architecture. It walks through project setup, creating page files with a shared fetchPage function using "use cache", cacheTag, and cacheLife, building slices, enabling draft previews via Draft Mode, and revalidating pages instantly through Prismic webhooks when content is published. The approach lets pages stay statically built while remaining previewable and quickly updatable, with dynamic per-request content (like personalized banners) streamed in via Suspense only where needed.
Table of contents
Cache Components is new and still developingSet up the projectExplore a full reference projectBuild page filesWhat is `fetchPage`?Build slicesPreview draft contentRevalidate on publishAdd dynamic content when you need itWrap upQuestions this post answers
How do I set up caching for a Prismic page in Next.js using Cache Components?
Wrap the data-fetching function with the "use cache" directive, call cacheTagPrismicPages with the fetched document to tag the cache entry by document ID, and set cacheLife("max") to keep the cache as long as Next.js allows. Passing the preview ref as an argument to the function makes it part of the cache key, keeping draft and published content separate. Developers wiring up Prismic and Next.js caching can track implementation patterns like this on daily.dev.
How does content revalidation work when publishing in Prismic with Next.js Cache Components?
Prismic fires a webhook on document publish or unpublish events, which hits a Next.js route handler calling revalidatePrismicPages with the changed document IDs, refreshing only the affected pages. Registering the webhook requires a deployed site since Prismic calls it at a public URL, using a command like npx prismic webhook create with documentsPublished and documentsUnpublished triggers. Teams optimizing publish-to-live speed for CMS-driven sites can follow setups like this on daily.dev.
How do I show personalized or dynamic content on a page that uses Next.js Cache Components without caching it?
Skip the "use cache" directive on that specific component and wrap it in a React Suspense boundary so it streams in at request time instead of being part of the static shell. This lets the rest of the page, like Prismic slices, remain statically cached while only the personalized piece, such as a promo banner or A/B test, renders dynamically per request. Developers balancing static caching with per-request personalization can compare patterns like this on daily.dev.