## What are Cache Components? **Cache Components** are a new mechanism in Next.js (starting with version 15/16). They allow you to mix static, dynamic, and cached content in one page. This solves the trade-off between speed (Static) and real-time updates (Dynamic). * **Static Content:** Pre-rendered during build time (`npm run build`). This includes local files and pure calculations. It loads instantly. * **Dynamic Content:** Rendered when a user requests the page. It depends on real-time data like cookies or headers. It is not cached by default. * **Cached Content:** This is dynamic data that is saved (cached) inside a **Static Shell**. Think of the Static Shell like an empty house structure that is built first, and then the "furniture" (dynamic content) is added later via **Streaming**. ### Comparison Table | Feature | Traditional Solution | Cache Components | | :--- | :--- | :--- | | **Static Pages** | Cannot update in real-time. | Supports revalidation and streaming. | | **Dynamic Pages** | Slow initial load; high server stress. | Static Shell returns first; dynamic content renders in parallel. | | **Client Rendering** | Large bundle size; slow first paint. | Server renders core content; client only adds dynamic parts. | --- ## Enabling Cache Components This is an optional feature. You must enable it in your `next.config.ts`: ```tsx import type { NextConfig } from "next"; const nextConfig: NextConfig = { experimental: { dynamicIO: true, // Enable Cache Components / Dynamic IO }, }; export default nextConfig; ``` --- ## 1. Static Content **Use case:** Components that only use synchronous I/O (like `fs.readFileSync`), module imports, or math calculations. ```tsx import fs from 'node:fs' export default async function Home() { const data = fs.readFileSync('data.json', 'utf-8'); // Read local file const json = JSON.parse(data); const impData = await import('../../../data.json'); // Import module return (

Home

{item.name} - {item.age}

) } ``` --- ## 2. Dynamic Content **Use case:** Using `fetch`, `cookies`, or `headers`. **Note:** Dynamic content **must** be wrapped in a `` component. ```tsx import { Suspense } from "react" import { cookies } from "next/headers" const DynamicContent = async () => { const data = await fetch('https://www.api.com/random-name'); const json = await data.json(); const cookieStore = await cookies(); return (

Dynamic Content

Name: {json.name}

) } export default async function Home() { return (

Home

Loading dynamic content...

}> ) } ``` ### How it works: PPR and Streaming Next.js uses **Partial Prerendering (PPR)**. It creates a **Static Shell** with placeholders. When a user visits, the server "streams" the dynamic content into those placeholders. * The `fallback` in `` is shown immediately. * Once the data is ready, the server sends the final HTML to replace the placeholder using React's internal scripts. --- ## 3. Handling Non-Deterministic Operations Operations like `Math.random()` or `Date.now()` change every time. If you use them directly in a Server Component, Next.js will throw an error because it tries to pre-render them as static values. **Solution:** Use `connection()` from `next/server`. This tells Next.js: "Do not pre-render this; wait for a real request." ```tsx import { Suspense } from "react" import { connection } from "next/server" const DynamicContent = async () => { await connection(); // Stop pre-rendering here const random = Math.random(); return

Random Number: {random}

} ``` --- ## 4. Cached Content You can define a "Cache Component" using the `'use cache'` directive and `cacheLife` to set the timing. **cacheLife Parameters:** * **stale:** How long the client uses the cache without asking the server. * **revalidate:** After this time, the server updates the cache in the background. * **expire:** After this time, the cache is deleted. ```tsx import { Suspense } from "react" import { cacheLife } from "next/cache" const CachedComponent = async () => { 'use cache' cacheLife("hours"); // Use a preset (seconds, minutes, hours, days, etc.) const data = await fetch('https://api.example.com/data'); const json = await data.json(); return

Data: {json.value}

} ```