Rendering Strategies (CSR, SSR, SSG, ISR)

၁။ Client-Side Rendering (CSR) - “Meal Kit (HelloFresh)”

ပါဝင်ပစ္စည်းတွေ (Ingredients) ကိုပဲ အိမ်ကို ပို့ပေးတယ်။ ရောက်မှ ကိုယ့်ဘာသာကိုယ် ချက်စားရတယ်။

Web: Server ကနေ Blank HTML အလွတ်တစ်ခုနဲ့ JS Code (Ingredients) တွေကိုပဲ ပို့ပေးလိုက်တယ်။ Browser (Client) ကမှ အဲ့ဒီ Code တွေကို ယူပြီး Website ဖြစ်အောင် တည်ဆောက် (Cook) ရတယ်။
Pros: တစ်ခါ ချက်ပြီးသွားရင် နောက်ထပ် ထပ်ချက်စရာ မလိုတော့ဘူး (Page တစ်ခုနဲ့ တစ်ခု ကူးတဲ့အခါ အရမ်းမြန်တယ်)။
Cons: စစချင်းမှာ ချက်ရတဲ့အတွက် အချိန်နည်းနည်း ကြာတယ် (Initial Load ကြာတယ်)။ ဗိုက်ဆာနေတဲ့သူ (SEO Bot တွေ) က မစောင့်နိုင်ဘူး။

၂။ Server-Side Rendering (SSR) - “Restaurant Delivery”

ဆိုင်မှာ သေချာ ချက်ပြုတ်ပြီးသား အစားအသောက်ကို ပူပူနွေးနွေး လာပို့ပေးတယ်။ အိမ်ရောက်တာနဲ့ တန်းစားလို့ ရတယ်။

Web: User က ဝင်လာတိုင်း Server ကနေ HTML အပြည့်အစုံ (Cooked Food) ကို ချက်ချင်း ဖန်တီးပြီး ပို့ပေးလိုက်တယ်။
Pros: ရောက်တာနဲ့ ချက်ချင်း မြင်ရတယ် (First Contentful Paint မြန်တယ်)။ Google SEO Bot တွေက စာတွေကို တန်းဖတ်လို့ရလို့ အရမ်း သဘောကျတယ်။
Cons: User ဝင်လာတိုင်း (Order တက်တိုင်း) Server က အသစ် ပြန်ချက်ပေးရလို့ စားဖိုမှူး (Server) အလုပ်အရမ်း ရှုပ်တယ်။

၃။ Static Site Generation (SSG) - “Frozen Food / Canned Food”

စက်ရုံမှာကတည်းက ကြိုချက်၊ ပါကင်ပိတ်ထားပြီးသား။ ဝယ်သူလာတာနဲ့ အဆင်သင့် ထုတ်ပေးလိုက်ရုံပဲ။

Web: Developer က Code ရေးပြီး Build လုပ်တဲ့ အချိန်မှာကတည်းက HTML (Frozen Food) တွေကို ကြိုထုတ်ထားလိုက်တယ်။ User ဝင်လာရင် အဲ့ဒီ အဆင်သင့်ရှိနေတဲ့ ဖိုင်ကိုပဲ ပြန်ပေးလိုက်တယ်။
Pros: အမြန်ဆုံး နည်းလမ်းပါပဲ။ Server က ဘာမှ လုပ်စရာ မလိုဘူး။
Cons: ဟင်းအသစ် စားချင်ရင် (Data အသစ် ပြချင်ရင်) စက်ရုံကနေ အသစ်ပြန်ထုတ်ရတယ် (Project တစ်ခုလုံးကို Rebuild ပြန်လုပ်ရတယ်)။

၄။ Incremental Static Regeneration (ISR) - “Bakery Shop”

မုန့်တွေကို မနက်ကတည်းက ကြိုဖုတ်ထားတယ်။ ဒါပေမဲ့ သတ်မှတ်ထားတဲ့ အချိန်ရောက်တိုင်း (ဥပမာ ၁ နာရီ တစ်ခါ) မုန့်အသစ် ထပ်ဖုတ်တယ်။

Web: SSG လိုပဲ အဆင်သင့် Static File တွေ ပေးတယ်။ ဒါပေမဲ့ သတ်မှတ်ထားတဲ့ အချိန် (ဥပမာ - ၁၀ မိနစ်) ပြည့်သွားရင်တော့ နောက်ကွယ်မှာ Server ကနေ Page အသစ်ကို ပြန်လည်တည်ဆောက် (Rebuild) နေတယ်။
Pros: SSG လို အမြန်ဆုံး ဖြစ်တယ်၊ ဒါပေမဲ့ Data က SSR လိုမျိုး (နီးပါး) အမြဲတမ်း Update (Fresh) ဖြစ်နေတယ်။
Cons: အချိန်ပြည့်ခါစမှာ ဝင်လာတဲ့ ပထမဆုံး လူကတော့ မုန့်အဟောင်း (Stale Data) ကို ခဏတာ မြင်ရနိုင်တယ်။ ဒုတိယလူမှသာ အသစ် (Fresh Data) ကို မြင်ရမယ်။

အသေးစိတ် ရှင်းလင်းချက်

1. Client-Side Rendering (CSR)

CSR ဆိုတာက Browser (Client) ပေါ်မှာပဲ Website ရဲ့ အလုပ်အများစုကို လုပ်ဆောင်တဲ့ နည်းလမ်းပါ။ React, Vue, Angular တို့လို Framework တွေက Default အနေနဲ့ဆို ဒီနည်းလမ်းကိုပဲ အသုံးပြုပါတယ်။

ဘယ်လိုအလုပ်လုပ်လဲ - User က Website ကို ဝင်လိုက်တဲ့အခါ Server က Blank HTML ဖိုင်လေးတစ်ခုနဲ့ JavaScript ဖိုင် အကြီးကြီးတစ်ခုကို အရင်ပို့ပေးလိုက်ပါတယ်။ Browser က အဲ့ဒီ JavaScript ကို Download လုပ်ပြီး Run ပြီးမှသာ Website အပြည့်အစုံ ပေါ်လာတာ ဖြစ်ပါတယ်။
အားသာချက် - ပထမဆုံးအကြိမ် Load လုပ်ပြီးသွားရင်၊ နောက်ထပ် စာမျက်နှာတွေ ကူးတဲ့အခါ အရမ်းမြန်ပါတယ်။ Mobile App တစ်ခုကို သုံးနေရသလိုမျိုး ချောမွေ့တဲ့ အတွေ့အကြုံကို ရစေပါတယ်။
အားနည်းချက် - ပထမဆုံးအကြိမ် ဖွင့်တဲ့အခါ JavaScript ကို Download ဆွဲပြီး Run ဖို့ စောင့်ရတဲ့အတွက် အချိန် နည်းနည်း ကြာနိုင်ပါတယ်။ Google Bot တွေ (SEO) က စာတွေကို ချက်ချင်းမမြင်ရတဲ့အတွက် Search Ranking တက်ဖို့ ခက်ခဲနိုင်ပါတယ်။
ဘယ်နေရာမှာ သုံးမလဲ - Admin Dashboard တွေ၊ Login ဝင်ပြီးမှသာ သုံးရတဲ့ App တွေ၊ SEO သိပ်မလိုအပ်တဲ့ နေရာတွေမှာ အများဆုံး သုံးပါတယ်။

2. Server-Side Rendering (SSR)

SSR ကတော့ User ဝင်လိုက်တာနဲ့ Server ဘက်မှာ HTML စာမျက်နှာ အပြည့်အစုံကို ချက်ချင်းတည်ဆောက်ပြီး Browser ဆီ ပို့ပေးလိုက်တဲ့ နည်းလမ်းပါ။ (ဥပမာ - Next.js, Nuxt.js တို့ကို သုံးပြီး လုပ်လေ့ရှိပါတယ်)

ဘယ်လိုအလုပ်လုပ်လဲ - User က Request လုပ်လိုက်တိုင်း Server က Database ထဲကနေ Data တွေ ဆွဲထုတ်၊ HTML စာမျက်နှာကို တည်ဆောက်ပြီး အသင့်ပြလို့ရတဲ့ Page အဖြစ် ပို့ပေးပါတယ်။
အားသာချက် - User က Website ကို ချက်ချင်း မြင်ရပါတယ်။ Google Bot (SEO) ကလည်း စာတွေကို ချက်ချင်း ဖတ်လို့ရတဲ့အတွက် Search Ranking ကောင်းပါတယ်။
အားနည်းချက် - User ဝင်လာတိုင်း Server က Page အသစ် ပြန်လုပ်ပေးရတဲ့အတွက် Server ပေါ်မှာ ဝန်ပိစေပြီး (ကုန်ကျစရိတ် များနိုင်ပါတယ်)။ Server ဘက်က လုပ်ဆောင်လို့ မပြီးမချင်း Browser က အဖြူရောင် မျက်နှာပြင်နဲ့ စောင့်နေရတတ်ပါတယ်။
ဘယ်နေရာမှာ သုံးမလဲ - Facebook News Feed လိုမျိုး၊ သတင်း Website တွေလို အမြဲတမ်း Data အသစ်တွေပြဖို့ လိုအပ်ပြီး၊ SEO လည်း မဖြစ်မနေ လိုချင်တဲ့ Website တွေမှာ သုံးပါတယ်။

3. Static Site Generation (SSG)

SSG ကတော့ Website ကို ကြိုတင်တည်ဆောက်ထားတဲ့ (Pre-built) နည်းလမ်းပါ။ Developer က Code ရေးပြီး Build လုပ်လိုက်တဲ့ အချိန်မှာကတည်းက HTML ဖိုင်တွေ အားလုံးကို အဆင်သင့် တည်ဆောက်ထားပြီးသား ဖြစ်ပါတယ်။

ဘယ်လိုအလုပ်လုပ်လဲ - User ဝင်လာတဲ့အခါ Server က ဘာမှ ထပ်လုပ်စရာ မလိုတော့ဘဲ ကြိုလုပ်ထားတဲ့ HTML ဖိုင်ကို အဆင်သင့် ပေးလိုက်ရုံပါပဲ။
အားသာချက် - အမြန်ဆုံး နည်းလမ်း ဖြစ်ပါတယ်။ Server ဘက်မှာ လုပ်ဆောင်စရာ ဘာမှ မရှိတဲ့အတွက် Security အကောင်းဆုံးဖြစ်ပြီး Server စရိတ်လည်း အသက်သာဆုံးပါပဲ။
အားနည်းချက် - Content အသစ်တစ်ခု တင်ချင်ရင် Website တစ်ခုလုံးကို ပြန်ပြီး Build လုပ်ရပါတယ်။ Real-time Data တွေ (ဥပမာ - စတော့ရှယ်ယာဈေးကွက်၊ Live Comment) တွေ ပြဖို့ မလွယ်ကူပါဘူး။
ဘယ်နေရာမှာ သုံးမလဲ - Blog တွေ၊ Documentation တွေ၊ ကုမ္ပဏီ Profile Website တွေလိုမျိုး ပြောင်းလဲမှု သိပ်မရှိတဲ့ နေရာတွေမှာ အများဆုံး သုံးပါတယ်။

4. Incremental Static Regeneration (ISR)

ISR ဆိုတာက SSG (Static Site Generation) ရဲ့ အဆင့်မြင့် Version တစ်ခုလို့ ပြောလို့ရပါတယ်။ SSG မှာတုန်းက Data အသစ် ပြင်ချင်ရင် Website တစ်ခုလုံးကို ပြန်ပြီး Build လုပ်ရတယ်ဆိုတဲ့ ပြဿနာကို ISR က ဖြေရှင်းပေးပါတယ်။ Website တစ်ခုလုံးကို Build ပြန်လုပ်စရာမလိုဘဲ စာမျက်နှာ တစ်ခုချင်းစီကို နောက်ကွယ်မှာ အလိုအလျောက် Update လုပ်ပြီး Browser ကို ပို့ပေးပါတယ်။

ဘယ်လိုအလုပ်လုပ်လဲ - ISR က စာမျက်နှာတွေကို SSG လိုမျိုး Static အနေနဲ့ပဲ သိမ်းထားပေးပါတယ်။ ဒါပေမဲ့ “သက်တမ်းကုန်ဆုံးချိန် (Revalidation Time)” တစ်ခုကို သတ်မှတ်ပေးလို့ ရပါတယ်။
1. User တစ်ယောက် ဝင်လာတဲ့အခါ ရှိပြီးသား Static စာမျက်နှာ အဟောင်းကိုပဲ ချက်ချင်း ပြလိုက်ပါတယ်။ (ဒါကြောင့် SSG လိုပဲ အရမ်း မြန်ပါတယ်)။
2. ဒါပေမဲ့ သတ်မှတ်ချိန် ပြည့်သွားရင်တော့၊ နောက်ကွယ်မှာ Server က Data အသစ်တွေနဲ့ အဲ့ဒီ စာမျက်နှာကို ပြန်လည်မွမ်းမံ (Rebuild) နေပါပြီ။
3. အဲ့ဒီနောက် ထပ်ဝင်လာမယ့် User တွေကတော့ အသစ်ပြင်ထားတဲ့ စာမျက်နှာ (Fresh Data) ကို မြင်ရမှာ ဖြစ်ပါတယ်။
အားသာချက် - SSG လိုပဲ အရမ်း မြန်တယ်။ Website တစ်ခုလုံးကို Build ပြန်လုပ်စရာမလိုဘဲ Data အသစ်တွေကို ပြနိုင်တယ်။
အားနည်းချက် - ပထမဆုံး ဝင်လာတဲ့ User ကတော့ Data အဟောင်းကို ခဏတာ မြင်ရနိုင်သေးတယ်။ (ဒုတိယလူကျမှ အသစ် မြင်ရတာပါ)။
ဘယ်နေရာမှာ သုံးမလဲ - E-commerce Site တွေ၊ မကြာခဏ Update လိုတဲ့ Blog တွေ၊ Static ရဲ့ မြန်နှုန်း (Speed) နဲ့ SSR ရဲ့ Data အသစ်ပြနိုင်မှု (Freshness) နှစ်ခုစလုံးကို ပေါင်းစပ် လိုအပ်တဲ့ နေရာတွေမှာ သုံးပါတယ်။