How does caching work in Next.js?

Request → Router Cache → Full Route Cache → Data Cache → Origin
         (Client)       (Server)           (Server)

// Cached indefinitely
fetch('https://api.example.com/data');

// Time-based revalidation
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 } // 1 hour
});

// No cache
fetch('https://api.example.com/data', {
  cache: 'no-store'
});

// Tag-based
fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
});

import { revalidatePath, revalidateTag } from 'next/cache';

// Revalidate specific path
revalidatePath('/blog');

// Revalidate by tag
revalidateTag('posts');

// Revalidate layout and all children
revalidatePath('/blog', 'layout');

// Page level
export const dynamic = 'force-dynamic';
export const revalidate = 0;

// Or use cookies/headers (makes dynamic)
import { cookies } from 'next/headers';

export default function Page() {
  const cookieStore = cookies(); // Now dynamic
  return <div>...</div>;
}