0
926
SSR And CSR
Myo Thant Kyaw
CSR(Client Side Rendering) And SSR(Server Side Rendering)
csr နဲ့ ssr လို့သာသုံးသွားပါမယ်
ဘယ်လို Web Developer မျိုးမဆို ဒီနှစ်ခုကိုသေချာနားလည်ထားဖို့
လိုအပ်လို့ဖတ်ထားသင့်ပါတယ် သိလည်းသိထားသင့်ပါတယ်။
csr နဲ့ ssr ကဘာလည်း
csr က client side rendering ဆိုတဲ့အတိုင်း
Browser(client or frontend) မှာ run ပါတယ်။
csr apporach နဲ့ သွားထားတဲ့ website တစ်ခုကို ခေါ်လိုက်တာနဲ့
server. ကနေ website. အတွက် script တွေအားလုံး browser က download ချသွားပါတယ်
ဒါကြောင့် page တစ် ခုနဲ့တစ်ခု ညွှန်ပြတဲ့အခါမျိုးမှာ server ကိုတစ်ခေါက်ပြန်မခေါ်တော့ပါဘူး
ဆိုလိုတာ loading ဖြစ်မနေတော့ဘူး
ညွှန်ပြတဲ့ routing system တွေကbrowser က download လုပ်တဲ့ script တွေအားလုံးရှိနေပီးသားအပြင်
လိုအပ်တဲ့ page တွေပါ တစ်ခါတည်း download ထားတဲ့အတွက်ဖြစ်ပါတယ်။
client side မှာသွားတာဖြစ်တဲ့အတွက် database ကိုချိတ်ဆက်ဖို့အတွက်ကြားခံ Api တစ်ခုတော့လိုပါတယ်။
.
.
ssr ကတော့ page တစ်ခုအတွက်လိုအပ်တဲ့အချက်အလက်(html ,script , data from database)ကိုပဲထုတ်ပြပါတယ်။
နောက်တစ် Page ကိုသွားတယ်ဆိုရင် နောက်တစ် page အတွက် အချက်အလက်ကိုဆွဲထုတ်ပါတယ်
ဒီတော့ page ကိုတွေကို linkတိုင်း browser loading ဖြစ်ပါတယ်။
Performace
Performace က သူ့ဟာနဲ့သူ နှစ်ခုလုံးမှာအားသာချက်ရှိပါတယ်။
csr ကပထမဆုံး website data တွေအားလုံး ကို download ချမှာဖြစ်လို့ပထမဆုံးအကြိမ်
မှာတော့နည်းနည်းနှေးနေနိုင်ပါတယ် ဒုတိယအခေါက်နဲ့နောက်အခေါက်တွေမှာ
Browser က Cache ထားတာကြောင့် အရမ်းမြန်ပီး UX မှာ အစစအရာရာ ssr ထက်မြန်ပါတယ်။
.
.
SSR ကတော့ အမြဲတမ်းမြန်ပါတယ်
Server Performace + Coding ကောင်းရင်ကောင်သလိုပေါ့
loading လေးတော့ကြည့်ရမယ် 
Development
CSR App တွေ Develop လုပ်ဖို့တွက်
Client Side(frontent) LIbiary Or Framework + Api
ဒီနှစ်မျိုးရေးယူရပါမယ်။
frontend libiary အတွက် React,Vue,Angular တွေကိုလေ့လာထားသင့်ပါတယ်။
.
.
SSR အတွက်
PHP Nodejs Python etc..
စတာတွေနဲ့ development လုပ်ရမှာဖြစ်ပီး
CSR လို Stack နှစ်ခုမလိုအပ်ပါဘူး
CSR + SSR ရောရေးလို့ရလား
ဒီလိုမေးခွန်းထက် Jquery အစား frontend libiary တစ်ခုခုနဲ့ရေးလို့အဆင်ပြေလား
ဆို အဆင်ပိုပြေပါတယ်။
ရေးလို့ရပါတယ်။
jquery လို code တွေပွမနေတော့ ပဲ structure ကျသွားမယ်
reusuable code တွေပိုကောင်းလာမယ်
တချို့ ux ကိုအသားပေးချင်တဲ့ အပိုင်းတွေအတွက်ဆိုပိုအဆင်ပြေပါတယ်ဒီလိုတွဲရေးတာ။
ဒီ့အပြင် csr ရဲ့ seo ကအားနည်းချက်တွေအများကြီးရှိပါတယ်
အခုလိုတွဲရေးလိုက်ခြင်းဖြင့် SEO ကိုလိုသလိုထိန်းလို့ရပါတယ်။
ဘယ်ဟာလေ့လာရလည်း
နှစ်ခုလုံးသိထားသင့်နေပါပီ
အခုမှစလုပ်မယ်ဆိုတော်တော်လေးနောက်ကျနေပါပီ
စတာပါ 
CSR ကို လွယ်ကူအောင်လုပ်ထားလေးအခုရှိနေပါပီ
1.laravel + livewire php သီးသန့်နဲ့ client side render သွားပါတယ်
2.Laravel+Inertiajs+frontend libiary(react vue angular)
livewire ကိုတော့ သိပ်မကြိုက်ပေမဲ့
2 ကိုတော့တော်တော်လေးကြိုက်ပါတယ် ဒါပေမဲ့ pure csr တွေလို performace ကတော့မကောင်းပါဘူးသလို Ajax request နဲ့ page တွေကိုခေါ်နေတယ်လို့အကြမ်းဖျဉ်းယူစနိုင်လို့ပါ
ကျွန်တော့်အမြင်ပါ။
ဒါဆိုရင် csr နဲ့ ssr ကိုသဘောပေါက်လောက်ပီလို့ယူဆပါတယ်
youtube မှာအခုပဲသွားရှာပီးလေ့လာတော့လေ!
Ajax