Code & Dev Compatible: claude

Cache Tags and Revalidation After a Mutation

Complexity Level: Beginner
Prompt Code Block

Specify cache tags for read-heavy pages and the revalidation that runs when the data changes. A user who edits their own record should not see a stale page. FRAMEWORK [NEXT.JS APP ROUTER] Pages: [LIST] Mutations: [LIST] Who can see the data: [PUBLIC | PER USER | PER ORG] DELIVER 1) The tag scheme: a tag per entity id and a tag per list. Show the fetch or the data helper that sets them. Include the tenant in the tag so one org cannot share another's cache entry. Say that out loud. 2) The mutation: after the write commits, revalidate the entity tag and the list tag. Show where this must not run if the write failed. 3) Private data: why a user-specific page should not sit in a shared cache, and the pattern instead (no store, or a cache key that includes the user and is not public). 4) A stale-while-revalidate note for the public page only, with a time I can edit. 5) A manual purge path for support, protected like an admin action. Do not revalidatePath("/") as the default. Do not cache personalized HTML on a shared CDN without a Vary or a private cache control, and show the header.

🌟 Example Output / Preview

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyBeginner
Compatibilityclaude

Primary Use Cases:

  • •Legacy code modernization & technical refactoring
  • •Full-stack layout generation & component structuring
  • •CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#nextjs #cache #react #typescript

💡 Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

🔗 Related AI Prompts

Code & Dev
★ Featured

Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
★ Featured 🔥 Trending

SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

SaaS Admin Panel Dashboard Build Spec

Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind