Static နှင့် Dynamic Deployment

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

Static site ဆိုတာ HTML၊ CSS၊ JavaScript နဲ့ image တွေနဲ့ ဖွဲ့စည်းထားပြီး ကြားထဲမှာ processing မလိုပဲ browser ဆီ တိုက်ရိုက်ပို့ပေးတာပါ။ Marketing page၊ documentation၊ blog၊ portfolio တွေက အသင့်တော်ဆုံးပါ၊ visitor တိုင်းဆီကို file အတူတူပဲ ပို့ပေးလို့ပါ။

Dynamic application ကတော့ request တိုင်းအတွက် code run ပေးနိုင်မယ့် runtime လိုပါတယ်၊ ပုံမှန်အားဖြင့် database၊ authentication၊ visitor တစ်ယောက်ချင်းအတွက် ဆုံးဖြတ်ချက်ချပေးမယ့် server-side logic တို့ပါဝင်ပါတယ် — social feed ဒါမှမဟုတ် store တစ်ခုမှာ လူတစ်ယောက်ချင်းစီ မြင်ရတာ ကွဲပြားတာကို စဉ်းစားကြည့်ပါ။

• Data သိမ်းဖို့/update လုပ်ဖို့ database လိုအပ်သလား
• User ကို ခွဲခြားသိဖို့ authentication လိုအပ်သလား
• ဘာပြရမလဲဆိုတာ ဆုံးဖြတ်ဖို့ server-side logic လိုအပ်သလား

လက်တွေ့မှာ ဒီအစိတ်အပိုင်းနှစ်ခုကို သီးခြားစီ deploy လုပ်လေ့ရှိပါတယ် — frontend ကို file တွေကို ကမ္ဘာတစ်ဝှမ်း မြန်မြန်ပို့ပေးဖို့ platform တစ်ခုမှာ၊ backend ကို server/serverless/container တစ်ခုခုပေါ်မှာ၊ database ကို သီးခြား managed service တစ်ခုပေါ်မှာ ထားတတ်ပါတယ် — framework အချို့ကတော့ နှစ်ခုကို ရောစပ်ထားတတ်ပါတယ်။

Static Site

Visitor တိုင်းဆီကို request တိုင်းမှာ processing မလိုပဲ တိုက်ရိုက်ပို့ပေးတဲ့ HTML၊ CSS၊ JS၊ image files အသင့်ပြင်ထားတဲ့ site။

Dynamic Application

Request တိုင်းမှာ code run ပေးတဲ့ application ဖြစ်ပြီး database၊ authentication၊ user အလိုက် response ကွဲပြားစေတဲ့ server-side logic ကို ပုံမှန်အားဖြင့် အားထားပါတယ်။

STATIC VS DYNAMIC DEPLOYMENT
----------------------------
STATIC:
  Browser --> CDN / Static Host --> HTML, CSS, JS files
              (Netlify, Vercel, GitHub Pages, S3+CDN)

DYNAMIC:
  Browser --> Frontend App --> Backend API --> Database
                                (auth, server logic)

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Deployment ကို စီစဉ်တဲ့အခါ project ရဲ့ အစိတ်အပိုင်းတစ်ခုချင်းစီ ဘာလိုအပ်သလဲလို့ မေးကြည့်ပါ။ Form သို့မဟုတ် account မလိုတဲ့ page ဆိုရင် static files အနေနဲ့ ပို့လို့ရပါတယ်။ Data သိမ်းဖို့၊ user မှတ်ဖို့၊ payment provider နဲ့ ဆက်သွယ်ဖို့ လိုအပ်တဲ့အရာဆိုရင် backend နဲ့ persistent storage လိုအပ်ပါတယ်။

လက်တွေ့ product အများစုက ရောစပ်ထားတာပါ — marketing site၊ docs section၊ login လုပ်ရမယ့် dashboard အသီးသီးက လိုအပ်ချက် ကွဲပြားပါတယ်။ အားလုံးကို လမ်းကြောင်းတစ်ခုတည်းနဲ့ မတွန်းပဲ သီးခြားစီ deploy လုပ်တာက ပုံမှန်ပါပဲ။

• Database လိုအပ်သလား
• Authentication လိုအပ်သလား
• Request တိုင်းမှာ custom logic run ရသလား

သုံးခုစလုံး 'မလို' ဆိုရင် static hosting က ပိုရိုးရှင်းပြီး၊ ဈေးသက်သာပြီး၊ မြန်ပါတယ်။ တစ်ခုခု 'လို' ဆိုရင်တော့ dynamic deployment path လိုအပ်ပါတယ် — ဘယ် platform သုံးမလဲဆိုတာက ဒီဆိုက်ရဲ့ tutorial တခြားတွေမှာ ဆွေးနွေးထားတဲ့ သီးခြားဆုံးဖြတ်ချက်ပါ။

• Static site တွေက pre-built files တွေကို request တိုင်းအတွက် server-side processing မလိုပဲ တိုက်ရိုက် ပို့ပေးပါတယ်။
• Dynamic application တွေက request တိုင်းအတွက် logic run ဖို့ runtime၊ database၊ authentication များစွာ လိုအပ်ပါတယ်။
• Frontend၊ backend၊ database အစိတ်အပိုင်းတွေကို bundle တစ်ခုတည်းအနေနဲ့ မဟုတ်ပဲ platform ကွဲပြားစွာ deploy လုပ်လေ့ရှိပါတယ်။

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

function classifyProject(project) {
  const needsBackend = project.needsDatabase || project.needsAuth || project.needsServerLogic;
  return needsBackend ? "dynamic-fit" : "static-fit";
}

const projects = [
  { name: "Portfolio site", needsDatabase: false, needsAuth: false, needsServerLogic: false },
  { name: "Company blog", needsDatabase: false, needsAuth: false, needsServerLogic: false },
  { name: "E-commerce store", needsDatabase: true, needsAuth: true, needsServerLogic: true },
  { name: "Docs site", needsDatabase: false, needsAuth: false, needsServerLogic: false },
  { name: "Social media app", needsDatabase: true, needsAuth: true, needsServerLogic: true },
];

for (const project of projects) {
  console.log(`${project.name}: ${classifyProject(project)}`);
}

Portfolio site: static-fit
Company blog: static-fit
E-commerce store: dynamic-fit
Docs site: static-fit
Social media app: dynamic-fit
(dynamic-fit ရလဒ်ရတဲ့ project တွေက database/auth/server logic တစ်ခုခု လိုအပ်လို့ပါ)

Introduction to the server side — MDN Web Docs — Cloud & Deployment