Next.js Caching and Revalidating

Expert guidance on caching data and UI in Next.js App Router using Cache Components, "use cache" directive, Streaming, Suspense, and Partial Prerendering (PPR).

@doc-version: 16.2.6

Core Concepts

Caching ใน Next.js คือการเก็บผลลัพธ์ของ data fetching และ computation ไว้ เพื่อให้ request ถัดไปไม่ต้องทำงานซ้ำ ทำให้เว็บเร็วขึ้น

Cache Components คือโมเดลใหม่ที่ใช้ "use cache" directive ควบคุมการ cache ในระดับ function หรือ component

Guidelines

1. เปิดใช้งาน Cache Components

// next.config.ts
import type { NextConfig } from 'next'