Cache Components Demo

Why Cache Components?

In modern web development, a page is rarely 100% static or 100% dynamic. The reality is a complex mix:

• Product Name: Changes almost never (Static).
• Price: Changes occasionally (Revalidatable).
• Stock: Changes in real-time (Dynamic).

Until now, managing this required complex segmentation strategies or sacrificing performance. Next.js 16 introduces primitives to solve this elegantly.

Solution Architecture

This project implements an Async Decoupled Component architecture, where each component owns its own data fetching and caching strategy.

// ❌ Data Monolith (All or nothing)
const product = await db.getProduct(id);

// ✅ Cache Components (Granularity)
<ProductText id={id} />      // 'use cache' + cacheLife('weeks')
<ProductPrice id={id} />     // 'use cache' + cacheTag('price')
<Suspense>
  <ProductStock id={id} />   // Dynamic + Streaming
</Suspense>

Features Implemented

1. Granular Caching: Independent control per component using the 'use cache' directive.
2. Tag-based Revalidation: Precise invalidation system. A price change doesn't force re-rendering the product description.
3. Static Shell + Streaming: The base HTML is served instantly (like SSG), while live data (Stock) comes in via streaming (PPR).
4. Automatic Optimization: Next.js automatically parallelizes promises without needing manual Promise.all.

Educational Value

This repository serves as a testing ground to understand the future of data-fetching in React. It demonstrates correct Suspense patterns, error handling in Server Components, and Zod integration to validate inputs in Server Actions.

It is a living reference for teams planning to migrate to Next.js 16 and adopt PPR (Partial Prerendering).