Rendering Strategies (CSR, SSR, SSG, ISR)

မိတ်ဆက်

Webpage တစ်ခုကို User ဆီ ဘယ်လို ပို့ပေးမလဲ? ဒီမေးခွန်းအတွက် အဖြေ (၄) မျိုး ရှိပါတယ်။ ဒါကို “အစားအသောက် မှာစားခြင်း” နဲ့ နှိုင်းယှဉ်ကြည့်ရအောင်။

1. Client-Side Rendering (CSR) - “Meal Kit (HelloFresh)”

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

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

2. Server-Side Rendering (SSR) - “Restaurant Delivery”

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

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

3. Static Site Generation (SSG) - “Frozen Food / Canned Food”

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

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

4. Incremental Static Regeneration (ISR) - “Bakery Shop”

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

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

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

1. Client-Side Rendering (CSR)

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

• ဘယ်လိုအလုပ်လုပ်လဲ - User က Website ကို ဝင်လိုက်တဲ့အခါ Server က Blank HTML နဲ့ JavaScript file အကြီးကြီးတစ်ခုကို အရင်ပို့ပေးလိုက်ပါတယ်။ Browser က အဲ့ဒီ JavaScript ကို download လုပ်ပြီး run ပြီးမှသာ Website ပေါ်လာတာဖြစ်ပါတယ်။

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

• အားနည်းချက် - ပထမဆုံးအကြိမ် ဖွင့်တဲ့အခါ JavaScript ကို စောင့်ရတဲ့အတွက် နည်းနည်းကြာနိုင်ပါတယ်။ Google (SEO) က စာတွေကို ချက်ချင်းမမြင်ရတဲ့အတွက် Ranking တက်ဖို့ ခက်နိုင်ပါတယ်။

• ဘယ်နေရာမှာသုံးမလဲ - Admin Dashboard တွေ၊ Login ဝင်ပြီးမှသုံးရတဲ့ App တွေ၊ SEO သိပ်မလိုတဲ့ နေရာတွေမှာ သုံးပါတယ်။

2. Server-Side Rendering (SSR)

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

• ဘယ်လိုအလုပ်လုပ်လဲ - User က Request လုပ်လိုက်တိုင်း Server က Database ထဲက data တွေဆွဲထုတ် HTML စာမျက်နှာတည်ဆောက်ပြီး အသင့်ပြလို့ရတဲ့ page ကို ပို့ပေးပါတယ်။

• အားသာချက် - User က Website ကို ချက်ချင်းမြင်ရပါတယ်။ Google (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 file တွေ အားလုံးကို အဆင်သင့် လုပ်ထားပြီးသားပါ။

• ဘယ်လိုအလုပ်လုပ်လဲ - User ဝင်လာတဲ့အခါ Server က ဘာမှထပ်လုပ်စရာမလိုတော့ဘဲ ကြိုလုပ်ထားတဲ့ HTML file ကို ပေးလိုက်ရုံပါပဲ။

• အားသာချက် - အမြန်ဆုံးနည်းလမ်း ဖြစ်ပါတယ်။ 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 စာမျက်နှာအဟောင်းကို ချက်ချင်းပြလိုက်ပါတယ်။ (ဒါကြောင့် အရမ်းမြန်ပါတယ်)။

  2. ဒါပေမဲ့ နောက်ကွယ်မှာတော့ Server က Data အသစ်တွေနဲ့ အဲ့ဒီစာမျက်နှာကို ပြန်လည်မွမ်းမံ (Rebuild) နေပါပြီ။

  3. နောက်ထပ်ဝင်လာမယ့် User တွေကတော့ အသစ်ပြင်ထားတဲ့ စာမျက်နှာကို မြင်ရမှာ ဖြစ်ပါတယ်။

• အားသာချက် - SSG လိုပဲ အရမ်းမြန်တယ်။ Website တစ်ခုလုံးကို Build ပြန်လုပ်စရာမလိုဘဲ Data အသစ်တွေကို ပြနိုင်တယ်။

• အားနည်းချက် - ပထမဆုံးဝင်တဲ့ User က Data အဟောင်းကို ခဏတာ မြင်ရနိုင်သေးတယ်။ (ဒုတိယလူကျမှ အသစ်မြင်ရတာပါ)။

• ဘယ်နေရာမှာသုံးမလဲ - E-commerce site တွေ၊ မကြာခဏ update လိုတဲ့ Blog တွေ၊ Static ရဲ့ မြန်နှုန်းနဲ့ SSR ရဲ့ Data အသစ်ပြနိုင်မှု နှစ်ခုစလုံး လိုအပ်တဲ့ နေရာတွေမှာ သုံးပါတယ်။