---
title: "Build Prismic websites with Next.js Cache Components"
url: https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778
source_url: https://prismic.io/blog/build-prismic-websites-with-nextjs-cache-components
type: article
source: "Prismic"
published: 2026-08-18T17:33:39.938Z
updated: 2026-08-18T18:24:58.995Z
tags: ["react", "nextjs", "cms"]
reading_time: 13
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Prismic websites with Next.js Cache Components

**[Prismic](https://daily.dev/sources/Prismic)** · 13 min read · 0 upvotes · 0 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://prismic.io/blog/build-prismic-websites-with-nextjs-cache-components>

## Questions 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._

## Similar posts on daily.dev

- [Cache components in Next.js: Faster pages with partial pre-rendering](https://daily.dev/posts/cache-components-in-next-js-faster-pages-with-partial-pre-rendering-xe8sns7u1) · LogRocket · 10 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs), [#cms](https://daily.dev/tags/cms)

[View this post on daily.dev](https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778)