Understanding Modern Next.js Rendering
A practical guide to understanding React Server Components, Client Components, and how Next.js rendering strategies like SSG, SSR, ISR, and PPR work together.
Server Components
Server Components တွေဟာ Server ပေါ်မှာသာ သီးသန့် Run တာကြောင့် Data Fetching လုပ်တာ၊ Databases တွေကို တိုက်ရိုက် Access လုပ်တာနဲ့ Private Environment Variables တွေကို လုံခြုံစွာ သုံးစွဲနိုင်ပါတယ်။ ဒါ့အပြင် Browser ဆီ ပို့ရမယ့် JavaScript Bundle Size ကိုလည်း သိသိသာသာ လျှော့ချပေးပါတယ်။
Client Components
State, Event Handlers, Effects နဲ့ Browser APIs တွေလိုမျိုး Interactive ဖြစ်တဲ့ UI လိုအပ်ချက်တွေအတွက် "use client" ကို သုံးပြီး Client Components အဖြစ် သတ်မှတ်ရပါတယ်။ ဒါဟာ CSR သီးသန့် မဟုတ်ဘဲ Server ပေါ်မှာ Initial HTML အဖြစ် Pre-render ပြုလုပ်ပေးပြီး Browser ဘက်ရောက်မှ Hydrate လုပ်ဆောင်သွားတာ ဖြစ်ပါတယ်။
Static Rendering (SSG)
Static Rendering ဟာ Build Time ကတည်းက Content တွေကို ကြိုတင် Generate လုပ်ထားတာကြောင့် Request တိုင်းအတွက် Server က အလုပ်လုပ်စရာမလိုဘဲ CDN Cache ကနေ လျင်မြန်စွာ Deliver လုပ်ပေးနိုင်ပါတယ်။ ဒါကြောင့် Blogs, Docs နဲ့ Marketing Pages တွေအတွက် အထူးသင့်တော်ပါတယ်။
Dynamic Rendering (SSR)
Dynamic Rendering ကတော့ Request ဝင်လာချိန်တိုင်းမှာ Content ကို Server ဘက်က အသစ် Generate လုပ်ပေးတာ ဖြစ်ပါတယ်။ Fresh Data နဲ့ Personalized Content တွေ လိုအပ်တဲ့ Dashboards နဲ့ User Accounts တွေအတွက် အသုံးဝင်ပေမဲ့ Request တိုင်းအတွက် Server Processing Time ပေးရပါတယ်။
Incremental Static Regeneration (ISR)
ISR ဟာ revalidate Time သတ်မှတ်ချက်ပေါ် မူတည်ပြီး Static Content တွေကို Background ကနေ အချိန်နဲ့အမျှ အလိုအလျောက် Update ပြန်လုပ်ပေးတာ ဖြစ်ပါတယ်။ ဒါကြောင့် Static ရဲ့ မြန်ဆန်တဲ့ Caching အားသာချက်နဲ့ Dynamic ရဲ့ Data Freshness ကို အချိုးညီ ပေါင်းစပ်ပေးထားတဲ့ နည်းလမ်းဖြစ်ပါတယ်။
Partial Prerendering (PPR)
PPR ဟာ Page တစ်ခုတည်းမှာတင် Static Shell နဲ့ Dynamic Parts တွေကို ပေါင်းစပ်ပေးနိုင်ပါတယ်။ Page တစ်ခုလုံးကို Dynamic ပြောင်းစရာမလိုဘဲ မပြောင်းလဲတဲ့ အပိုင်းတွေကို Static အဖြစ် Cache လုပ်ကာ Dynamic ဖြစ်ရမယ့် အစိတ်အပိုင်းတွေကိုသာ သီးသန့် Stream လုပ်ပေးနိုင်တာ ဖြစ်ပါတယ်။
The Mental Model
Component Type (Server vs Client) က "Code က ဘယ်နေရာမှာ Run မလဲ" ဆိုတာကို ဆုံးဖြတ်ပေးပြီး၊ Rendering Strategy (Static, Dynamic, ISR, PPR) က "Content ကို ဘယ်အချိန်၊ ဘယ်လို Generate လုပ်မလဲ" ဆိုတာကို ဆုံးဖြတ်ပေးတာ ဖြစ်ပါတယ်။ ဒါကြောင့် ဒါတွေဟာ သီးခြား Dimension နှစ်ခု ဖြစ်ပါတယ်။
Choosing the Right Approach
Browser Interaction လိုအပ်ရင် Client Component ကို သုံးပါ၊ Request သို့မဟုတ် User အပေါ် မူတည်ပြီး Dynamic Data လိုရင် Dynamic Rendering ကို သုံးပါ၊ အချိန်အတိုင်းအတာတစ်ခုအလိုက် Data Update ဖြစ်ဖို့ လိုရင် ISR ကို သုံးပြီး အမြဲတစေ မပြောင်းလဲတဲ့ Content တွေအတွက် Static Rendering ကို ရွေးချယ်ပါ။
Common Misunderstandings
Server Component သည် SSR မဟုတ်သလို Client Component သည်လည်း CSR သီးသန့် မဟုတ်ဘဲ Pre-rendering အဆင့်တွေမှာ ပါဝင်နိုင်ပါတယ်။ ထို့ပြင် SSR တိုင်း အမြဲ မမြန်ဆန်နိုင်သလို Interactive Features တွေအတွက်လည်း Client Components တွေကို မဖြစ်မနေ တွဲဖက်သုံးစွဲရမှာ ဖြစ်ပါတယ်။
Final Thoughts
ခေတ်သစ် Next.js Rendering စနစ်မှာ Component Architecture နဲ့ Rendering Strategy တွေဟာ အပြိုင်လုနေတဲ့ ရွေးချယ်မှုတွေ မဟုတ်ပါ။ Component Type က UI စွမ်းဆောင်ရည်ကို သတ်မှတ်ပေးပြီး Rendering Strategy က Content ပို့ဆောင်ပုံကို သတ်မှတ်ပေးကာ တစ်ခုနဲ့တစ်ခု အချိုးညီ ပေါင်းစပ်အလုပ်လုပ်ကြတာ ဖြစ်ပါတယ်။