Cache Components နှင့် Revalidation

Data ကို request တိုင်း database ကနေပြန်ယူရင် မှန်ကန်ပေမယ့် အကုန်နှေးပြီး ကုန်ကျစရိတ်တက်နိုင်ပါတယ်။ တစ်ဖက်မှာ cache အမြဲထားပြီး မပြန်လဲရင် user က data အဟောင်းမြင်ရပါတယ်။ Cache strategy ဆိုတာ မြန်နှုန်းနဲ့ freshness ကြားက စဉ်းစားဆုံးဖြတ်ချက်ပါ။

နားလည်ထားရမယ့် အချက်

Next.js 16 ရဲ့ Cache Components model ကိုသုံးရန် next.config.ts မှာ cacheComponents ဖွင့်ပါတယ်။ Cache လုပ်မယ့် function ထဲ use cache ထည့်ပြီး cacheLife နဲ့ သက်တမ်းသတ်မှတ်နိုင်ပါတယ်။ cacheTag က data group ကိုနာမည်ပေးပြီး mutation ပြီးချိန် updateTag သို့မဟုတ် revalidateTag နဲ့ တိတိကျကျ ပြန်အသစ်လုပ်နိုင်ပါတယ်။ User တစ်ဦးချင်း secret data သို့မဟုတ် အမြဲလတ်ဆတ်ရမယ့် data ကို မစဉ်းစားဘဲ cache မလုပ်ပါနဲ့။

အတူတူ စမ်းရေးကြည့်မယ်

// next.config.ts
import type { NextConfig } from "next";
export default { cacheComponents: true } satisfies NextConfig;

// app/lib/notes.ts
import { cacheLife, cacheTag } from "next/cache";

export async function getPublicNotes() {
  "use cache";
  cacheLife("hours");
  cacheTag("notes");
  return db.note.findMany({ where: { published: true } });
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

getPublicNotes က တစ်နာရီ profile နဲ့ cache လုပ်ပြီး notes tag ပေးထားပါတယ်။ Note အသစ်ထည့်ပြီးချိန် Server Action က updateTag('notes') ခေါ်ရင် user က ပြောင်းလဲမှုကိုချက်ချင်းမြင်နိုင်ပါတယ်။

Public notes query ကို cache မှပြန်သုံးပြီး သတ်မှတ်ထားသောအချိန် သို့မဟုတ် tag invalidation အချိန်မှာ အသစ်ယူမည်။

Next.js — Revalidating — Next.js