🚀 Next.js Caching (Easy Notes)

📌 1. Caching kya hota hai?

👉 Simple:

Same data ko baar-baar fetch na karna
Ek baar store karke reuse karna

👉 Benefit:

🚀 Fast performance
⚡ Less API calls

⚙️ 2. Cache Enable kaise kare?

plaintext

const nextConfig = {
  cacheComponents: true,
}

export default nextConfig

👉 Ye enable karta hai advanced caching system

🧠 3. "use cache" Directive

👉 Caching enable karne ke liye:

plaintext

export async function getUsers() {
  "use cache"
  return fetch("/api/users")
}

🔥 4. Types of Caching

🟢 1. Data-level Caching

👉 Function ko cache karo

plaintext

export async function getProducts() {
  "use cache"
  return fetch("/api/products")
}

👉 Same data → fast reuse

🔵 2. UI-level Caching

👉 Component ko cache karo

plaintext

export default async function Page() {
  "use cache"

  const data = await fetch("/api/users")
  return <div>{data.length}</div>
}

👉 Pure page cache ho jayega

⏳ 5. Cache Duration (cacheLife)

plaintext

import { cacheLife } from "next/cache"

export async function getData() {
  "use cache"
  cacheLife("hours")
}

👉 Data kitne time tak cache rahega

⚡ 6. Fresh Data kab chahiye?

👉 "use cache" mat use karo

👉 Instead use:

Suspense

plaintext

import { Suspense } from "react"

<Suspense fallback="Loading...">
  <Component />
</Suspense>

👉 Real-time data ke liye best

🍪 7. Runtime Data (cookies, params)

👉 Ye dynamic hota hai

👉 Always Suspense me wrap karo

plaintext

import { cookies } from "next/headers"

const theme = cookies().get("theme")

👉 Cache directly use nahi kar sakte

🔄 8. Cache Key kaise banta hai?

👉 Based on:

Function arguments
Input values

👉 Example:

plaintext

getUser(1)
getUser(2)

👉 Dono alag cache

🔥 9. Streaming + Caching

👉 Mix use hota hai:

Static → cache
Dynamic → Suspense

🧠 10. Partial Prerendering (Important)

👉 Page 3 parts me hota hai:

Static (fast load)
Cached data
Dynamic data (stream)

👉 Isko bolte hain:

👉 PPR (Partial Prerendering)

❌ 11. Kab cache use nahi kare?

Real-time data
User-specific data
Random values (Date.now, Math.random)

🧪 12. Example (Complete समझो)

plaintext

export default function Page() {
  return (
    <>
      <h1>Blog</h1>

      <CachedPosts />

      <Suspense fallback="Loading...">
        <UserData />
      </Suspense>
    </>
  )
}

👉 CachedPosts → fast

👉 UserData → dynamic

🧠 13. Important Rules (Interview)

"use cache" = caching enable
cacheLife = duration
Suspense = dynamic loading
Cache key = input based
PPR = mix of static + dynamic

🔥 Short Revision (1 min)

👉 Cache = fast data

👉 use cache = enable

👉 Suspense = fresh data

👉 PPR = mixed rendering

💥 Super Simple Line

👉 "Next.js me caching se performance fast hota hai aur Suspense se dynamic data handle hota hai"

🚀 Full Flow

Data fetch
Cache store
Next request → fast response
Revalidate → update data