Habr ၏ ရှေ့ဆုံး ဆော့ဖ်ဝဲရေးသားသူ မှတ်တမ်းများ- ပြန်လည်ပြင်ဆင်ခြင်းနှင့် ရောင်ပြန်ဟပ်ခြင်း။

Habr သည် အတွင်းပိုင်းမှ မည်သို့ဖွဲ့စည်းပုံ၊ အလုပ်အသွားအလာကို မည်သို့ဖွဲ့စည်းပုံ၊ ဆက်သွယ်ရေးစနစ်ဖွဲ့စည်းပုံ၊ မည်သည့်စံနှုန်းများကိုအသုံးပြုသည်နှင့် ဤနေရာတွင် ကုဒ်ကို ယေဘူယျရေးထားပုံတို့ကို ကျွန်ုပ် အမြဲတမ်း စိတ်ဝင်စားခဲ့သည်။ ကံကောင်းထောက်မစွာ၊ ကျွန်ုပ်သည် မကြာသေးမီက habra အဖွဲ့တွင် ပါဝင်လာသောကြောင့် ထိုသို့သောအခွင့်အရေးကို ကျွန်ုပ်ရခဲ့သည်။ မိုဘိုင်းဗားရှင်း၏ သေးငယ်သော ပြန်လည်ပြင်ဆင်မှုနမူနာကို အသုံးပြု၍ ရှေ့တွင် ဤနေရာတွင် အလုပ်လုပ်ရသည်မှာ အဘယ်နည်းဟူသည့် မေးခွန်းကို ကျွန်ုပ်ဖြေရန် ကြိုးစားပါမည်။ အစီအစဉ်တွင်- Habr တွင် ကိုယ်ရေးကိုယ်တာအတွေ့အကြုံအကြောင်း မှတ်စုများမှ ဆော့စ်များဖြင့် Node၊ Vue၊ Vuex နှင့် SSR။

ဖွံ့ဖြိုးတိုးတက်ရေးအဖွဲ့အကြောင်း သင်သိထားရမည့် ပထမဆုံးအချက်မှာ ကျွန်ုပ်တို့ထဲမှ အနည်းငယ်သာရှိသည်။ မလုံလောက်ပါ - ၎င်းတို့သည် မျက်နှာစာသုံးခု၊ နောက်ကျောနှစ်ခုနှင့် Habr - Baxley အားလုံး၏ နည်းပညာဆိုင်ရာ ဦးဆောင်မှုဖြစ်သည်။ စမ်းသပ်သူ၊ ဒီဇိုင်နာတစ်ဦး၊ Vadim သုံးဦး၊ အံ့ဖွယ်တံမြက်စည်း၊ စျေးကွက်ရှာဖွေရေးကျွမ်းကျင်သူနှင့် အခြား Bumburums များလည်း ရှိပါသည်။ သို့သော် Habr ၏အရင်းအမြစ်များကို တိုက်ရိုက်ပံ့ပိုးပေးသူ ခြောက်ဦးသာရှိသည်။ ဤအရာသည် အလွန်ရှားပါးသည် - အပြင်ဘက်မှကြည့်ရသည်မှာ ဧရာမလုပ်ငန်းကြီးတစ်ခုနှင့်တူသည့် ဒေါ်လာသန်းပေါင်းများစွာတန်သော ပရိတ်သတ်ပါရှိသော ပရောဂျက်တစ်ခုဖြစ်ပြီး လက်တွေ့တွင် အပြန့်ပြူးဆုံးဖြစ်နိုင်သော အဖွဲ့အစည်းဖွဲ့စည်းပုံဖြင့် ဇိမ်ခံလုပ်ငန်းစတင်သည့်ပုံစံနှင့် ပိုတူပါသည်။

အခြားသော အိုင်တီကုမ္ပဏီများကဲ့သို့ပင် Habr သည် သွက်လက်သော အတွေးအခေါ်များ၊ CI ကျင့်ထုံးများ နှင့် ပြည့်စုံသည်။ ဒါပေမယ့် ကျွန်တော့်ခံစားချက်အရ Habr ဟာ ထုတ်ကုန်တစ်ခုအနေနဲ့ စဉ်ဆက်မပြတ်ထက် လှိုင်းတွေပိုပြီး တိုးတက်နေပါတယ်။ ထို့ကြောင့်၊ ဆက်တိုက်ပြေးခြင်းများစွာအတွက်၊ ကျွန်ုပ်တို့သည် တစ်စုံတစ်ခုကို ကုဒ်လုပ်ကာ ဒီဇိုင်းနှင့် ပြန်လည်ဒီဇိုင်းထုတ်ကာ၊ တစ်ခုခုကို ချိုးဖျက်ကာ ပြုပြင်ကာ၊ လက်မှတ်များကို ဖြေရှင်းကာ အသစ်များကို ဖန်တီးကာ၊ ထွန်တုံးပေါ်တက်ကာ ခြေထောက်ကို ပစ်သတ်လိုက်ကာ နောက်ဆုံးတွင် အင်္ဂါရပ်ကို ထုတ်လွှတ်ပေးရန်အတွက်၊ ထုတ်လုပ်မှု။ ထို့နောက်တွင် အချို့သော နိမိတ်ပုံ၊ ပြန်လည်တည်ဆောက်မှုကာလ၊ “အရေးမကြီး-အရေးတကြီးမဟုတ်” လေးထောင့်ကွက်အတွင်းရှိသောအရာကို လုပ်ဆောင်ရန် အချိန်တစ်ခု ရောက်လာသည်။

၎င်းသည် အောက်တွင် ဆွေးနွေးမည့် ဤ "ရာသီပိတ်" အပြေးပြိုင်ပွဲ အတိအကျဖြစ်သည်။ ယခုတစ်ကြိမ်တွင် ၎င်းသည် Habr ၏ မိုဘိုင်းဗားရှင်းကို ပြန်လည်ပြင်ဆင်ခြင်း ပါဝင်သည်။ ယေဘုယျအားဖြင့်၊ ကုမ္ပဏီသည် ၎င်းအတွက် မျှော်လင့်ချက်ကြီးကြီးမားမားရှိပြီး အနာဂတ်တွင် ၎င်းသည် Habr ၏ လူ့ဇာတိခံယူသည့်တိရစ္ဆာန်ရုံတစ်ခုလုံးကို အစားထိုးကာ universal cross-platform ဖြေရှင်းချက်တစ်ခု ဖြစ်လာမည်ဖြစ်သည်။ တစ်နေ့နေ့တွင် လိုက်လျောညီထွေရှိသော အပြင်အဆင်၊ PWA၊ အော့ဖ်လိုင်းမုဒ်၊ အသုံးပြုသူစိတ်ကြိုက်ပြုလုပ်ခြင်းနှင့် အခြားစိတ်ဝင်စားဖွယ်အရာများစွာ ရှိလိမ့်မည်။

အလုပ်တစ်ခုကို သတ်မှတ်ကြပါစို့

တစ်ခါက သာမန် မတ်တပ်ရပ်တဲ့ အချိန်မှာ ရှေ့ဆုံးက တစ်ယောက်က မိုဘိုင်းဗားရှင်းရဲ့ မှတ်ချက်အစိတ်အပိုင်းရဲ့ တည်ဆောက်ပုံဆိုင်ရာ ပြဿနာတွေကို ပြောခဲ့ပါတယ်။ ဒါကို စိတ်ထဲထားပြီး၊ အဖွဲ့စိတ်ရောဂါကုထုံးပုံစံနဲ့ မိုက်ခရိုအစည်းအဝေးတစ်ခုကို စီစဉ်ခဲ့တယ်။ ဘယ်သူကမှ လက်ခုပ်တီးရုံကလွဲလို့ လူတိုင်းက စာရွက်ပေါ်မှာ မှတ်တမ်းတင်ထားတယ်၊ ကိုယ်ချင်းစာတယ်၊ နားလည်တယ်၊ ရလဒ်မှာ မိုဘိုင်းလ် Habr သည် အောင်မြင်မှုဆီသို့ ရှည်လျားပြီး ခက်ခဲကြမ်းတမ်းသော လမ်းကြောင်းရှိနေဆဲဖြစ်ကြောင်း ရှင်းရှင်းလင်းလင်းဖြစ်စေသည့် ပြဿနာ 20 ၏စာရင်းဖြစ်သည်။

အရင်းအမြစ်အသုံးပြုမှု၏ထိရောက်မှုနှင့်ချောမွေ့သောအင်တာဖေ့စ်ဟုခေါ်သည်တို့ကိုကျွန်ုပ်အဓိကစိုးရိမ်ခဲ့သည်။ နေ့စဉ်၊ အိမ်အလုပ်-အိမ်အပြန်လမ်းတွင်၊ ကျွန်ုပ်၏ဖုန်းဟောင်းသည် ဖိဒ်တွင် ခေါင်းစည်း 20 ကိုပြသရန် အသည်းအသန်ကြိုးစားနေသည်ကို တွေ့ခဲ့ရသည်။ ဤအရာသည် ဤကဲ့သို့ ဖြစ်သည်-

ပြန်လည်မပြင်ဆင်မီ Mobile Habr မျက်နှာပြင်

ဒီမှာဘာတွေဖြစ်နေတာလဲ? အတိုချုပ်အားဖြင့်၊ ဆာဗာသည် အသုံးပြုသူ အကောင့်ဝင်သည်ဖြစ်စေ၊ မဝင်သည်ဖြစ်စေ လူတိုင်းကို HTML စာမျက်နှာကို တူညီသောနည်းဖြင့် ဆောင်ရွက်ပေးပါသည်။ ထို့နောက် client JS ကို တင်ပြီး လိုအပ်သောဒေတာကို ထပ်မံတောင်းဆိုသော်လည်း ခွင့်ပြုချက်အတွက် ပြင်ဆင်ထားသည်။ ဆိုလိုသည်မှာ၊ ကျွန်ုပ်တို့သည် တူညီသောအလုပ်ကို နှစ်ကြိမ်လုပ်ခဲ့သည်။ အင်တာဖေ့စ်သည် တဖျပ်ဖျပ်ဖျပ်ခတ်သွားကာ သုံးစွဲသူသည် ကောင်းသော ကီလိုဘိုက်တစ်ရာကို ဒေါင်းလုဒ်လုပ်ခဲ့သည်။ အစစအရာရာ အသေးစိတ်ကြည့်လျှင် ပိုကြောက်စရာကောင်းသည်။

SSR-CSR အစီအစဉ်ဟောင်း။ Node JS သည် HTML ထုတ်ပေးရာတွင် အလုပ်ရှုပ်မနေဘဲ API သို့ proxy တောင်းဆိုမှုများ ပြုလုပ်သောအခါတွင်သာ ခွင့်ပြုချက်သည် C3 နှင့် C4 အဆင့်များတွင်သာ ဖြစ်နိုင်သည်။

ထိုအချိန်က ကျွန်ုပ်တို့၏ဗိသုကာလက်ရာကို Habr အသုံးပြုသူတစ်ဦးမှ အလွန်တိကျစွာဖော်ပြခဲ့သည်-

မိုဘိုင်းဗားရှင်းက မိုက်တယ်။ ငါအဲလိုပြောနေတာ။ ကြောက်မက်ဖွယ်ကောင်းသော SSR နှင့် CSR ပေါင်းစပ်မှု။

ဘယ်လောက်ပဲ ဝမ်းနည်းနေပါစေ ဝန်ခံရမယ်။

ရွေးချယ်စရာများကို အကဲဖြတ်ပြီး "မကောင်းပါဘူး အခုလုပ်ပါ၊ မှန်အောင်လုပ်ပါ" အဆင့်မှာ ဖော်ပြချက်တစ်ခုနဲ့ Jira မှာ လက်မှတ်တစ်ခုကို ဖန်တီးပြီး အလုပ်တစ်ခုကို ကျယ်ကျယ်ပြန့်ပြန့် ပြိုကွဲစေပါတယ်-

• ဒေတာပြန်သုံး၊
• ပြန်လည်ရေးဆွဲမှု အရေအတွက်ကို နည်းပါးအောင်၊
• ထပ်နေသော တောင်းဆိုမှုများကို ဖယ်ရှားရန်၊
• loading လုပ်ငန်းစဉ်ကို ပိုမိုထင်ရှားစေသည်။

ဒေတာကို ပြန်သုံးကြည့်ရအောင်

သီအိုရီအရ၊ server-side rendering သည် ပြဿနာ နှစ်ခုကို ဖြေရှင်းရန် ဒီဇိုင်းထုတ်သည်- ရှာဖွေရေးအင်ဂျင် ကန့်သတ်ချက်များကြောင့် မခံစားရစေရန်၊ SPA အညွှန်းကိန်း မက်ထရစ်ကို မြှင့်တင်ပါ။ FMP (မလွှဲမရှောင်သာ ပိုဆိုးလာသည်။ TTI) ဂန္ထဝင်ဇာတ်လမ်းတစ်ခုတွင် နောက်ဆုံးတွင် Airbnb တွင် 2013 ခုနှစ်တွင် ပုံဖော်ခဲ့သည်။ နှစ် (Backbone.js တွင်ရှိနေဆဲ)၊ SSR သည် Node ပတ်ဝန်းကျင်တွင် လုပ်ဆောင်နေသည့် တူညီသော isomorphic JS အပလီကေးရှင်းဖြစ်သည်။ ဆာဗာသည် တောင်းဆိုချက်ကို တုံ့ပြန်သည့်အနေဖြင့် ထုတ်လုပ်ထားသော အပြင်အဆင်ကို ရိုးရှင်းစွာ ပေးပို့သည်။ ထို့နောက် ရေဓာတ်ပြန်လည်ဖြည့်တင်းမှုသည် သုံးစွဲသူဘက်တွင် ဖြစ်ပေါ်ပြီး စာမျက်နှာကို ပြန်လည်စတင်ခြင်းမရှိဘဲ အရာအားလုံးသည် အလုပ်လုပ်ပါသည်။ Habr အတွက်၊ စာသားအကြောင်းအရာပါသည့် အခြားအရင်းအမြစ်များစွာအတွက်၊ ဆာဗာတင်ဆက်ခြင်းသည် ရှာဖွေရေးအင်ဂျင်များနှင့် ဖော်ရွေသောဆက်ဆံရေးတည်ဆောက်ရာတွင် အရေးပါသောအစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

နည်းပညာထွန်းကားလာသည်နှင့်အမျှ ခြောက်နှစ်ကျော်ကြာလာခဲ့သော်လည်း၊ ဤအချိန်အတွင်း ရှေ့ဆုံးကမ္ဘာရှိ တံတားအောက်တွင် ရေအများအပြား စီးဆင်းနေသော်လည်း developer အများအပြားအတွက် ဤစိတ်ကူးသည် လျှို့ဝှက်ထားဆဲဖြစ်သည်။ ကျွန်ုပ်တို့သည် ဘေးဖယ်မနေဘဲ ထုတ်လုပ်ရန်အတွက် SSR ပံ့ပိုးမှုဖြင့် Vue အက်ပလီကေးရှင်းကို လွှင့်တင်ခဲ့ပြီး အသေးစိတ်အသေးစိတ်အချက်တစ်ချက်ကို လွဲချော်ခဲ့သည်- ကျွန်ုပ်တို့သည် ကနဦးအခြေအနေအား သုံးစွဲသူထံ မပေးပို့ခဲ့ပါ။

အဘယ်ကြောင့်? ဤမေးခွန်းအတွက် အဖြေအတိအကျမရှိပါ။ ဆာဗာမှ တုံ့ပြန်မှုအရွယ်အစားကို တိုးမြှင့်လိုခြင်း သို့မဟုတ် အခြားသော ဗိသုကာဆိုင်ရာ ပြဿနာများစွာကြောင့် သို့မဟုတ် ၎င်းသည် ရိုးရှင်းစွာ ရပ်တန့်သွားခြင်းမရှိပေ။ တစ်နည်းမဟုတ်တစ်နည်းအားဖြင့် အခြေအနေကို ဖယ်ထုတ်ပြီး ဆာဗာလုပ်ခဲ့သမျှကို ပြန်လည်အသုံးပြုခြင်းသည် အလွန်သင့်လျော်ပြီး အသုံးဝင်ပုံရသည်။ အလုပ်က တကယ်တော့ အသေးအဖွဲပါပဲ၊ နိုင်ငံတော်က ရိုးရိုးဆေးထိုးတယ်။ execution context ထဲသို့ Vue သည် ၎င်းကို global variable အဖြစ် ထုတ်လုပ်ထားသော အပြင်အဆင်သို့ အလိုအလျောက် ပေါင်းထည့်သည်- window.__INITIAL_STATE__.

ဖြစ်ပေါ်လာသည့် ပြဿနာများထဲမှ တစ်ခုသည် စက်ဘီးစီးသည့် ဖွဲ့စည်းပုံများကို JSON အဖြစ်သို့ ပြောင်းလဲနိုင်စွမ်း မရှိခြင်း (မြို့ပတ်ရထားရည်ညွှန်း); ထိုကဲ့သို့သော အဆောက်အဦများကို ၎င်းတို့၏ ပြားချပ်ချပ်ချပ်များဖြင့် အစားထိုးခြင်းဖြင့် ဖြေရှင်းခဲ့သည်။

ထို့အပြင်၊ UGC အကြောင်းအရာနှင့် ဆက်ဆံရာတွင်၊ ဒေတာကို HTML ကို မပျက်စီးစေရန်အတွက် HTML entities သို့ ပြောင်းလဲသင့်ကြောင်း မှတ်သားထားသင့်သည်။ ဤရည်ရွယ်ချက်များအတွက်ကျွန်ုပ်တို့အသုံးပြုသည်။ he.

ပြန်လည်ရေးဆွဲမှုများကို လျှော့ချပါ။

အထက်ဖော်ပြပါပုံတွင် သင်တွေ့မြင်နိုင်သည်အတိုင်း၊ ကျွန်ုပ်တို့၏အခြေအနေတွင်၊ Node JS instance တစ်ခုသည် အသုံးပြုသူခွင့်ပြုချက်ရရှိသည့် API ရှိ SSR နှင့် “proxy” လုပ်ဆောင်ချက်နှစ်ခုကို လုပ်ဆောင်သည်။ node သည် single-threaded ဖြစ်ပြီး SSR function သည် synchronous ဖြစ်နေသောကြောင့် ဤအခြေအနေသည် ဆာဗာပေါ်တွင် JS ကုဒ်ကို လုပ်ဆောင်နေချိန်တွင် ခွင့်ပြုရန်မဖြစ်နိုင်ပါ။ ဆိုလိုသည်မှာ၊ callstack သည် တစ်ခုခုနှင့် အလုပ်ရှုပ်နေချိန်တွင် ဆာဗာသည် တောင်းဆိုချက်များကို သူ့ဘာသာသူ မပို့နိုင်ပါ။ ကျွန်ုပ်တို့သည် အခြေအနေအား အပ်ဒိတ်လုပ်ထားကြောင်း ပေါ်လွင်လာသော်လည်း သုံးစွဲသူ၏ စက်ရှင်အား ထည့်သွင်း၍ အသုံးပြုသူ၏ ဒေတာကို အပ်ဒိတ်လုပ်ရန် လိုအပ်သောကြောင့် အင်တာဖေ့စ်သည် တုန်လှုပ်ခြင်းကို မရပ်တန့်ခဲ့ပါ။ အသုံးပြုသူ၏ဝင်ရောက်မှုကို ထည့်သွင်းစဉ်းစား၍ မှန်ကန်သောဒေတာကို ကနဦးအခြေအနေတွင် ထည့်သွင်းရန် ကျွန်ုပ်တို့၏အက်ပ်လီကေးရှင်းကို သင်ကြားပေးရန် လိုအပ်ပါသည်။

ပြဿနာအတွက် ဖြေရှင်းနည်း နှစ်ခုသာ ရှိခဲ့သည်။

• ခွင့်ပြုချက်ဒေတာကို ဆာဗာဖြတ်ကျော်တောင်းဆိုမှုများတွင် ပူးတွဲပါရှိသည်။
• Node JS အလွှာများကို သီးခြားဥပမာနှစ်ခုအဖြစ် ခွဲပါ။

ပထမဖြေရှင်းချက်သည် ဆာဗာပေါ်တွင် ကမ္ဘာလုံးဆိုင်ရာကိန်းရှင်များကို အသုံးပြုရန် လိုအပ်ပြီး ဒုတိယသည် အလုပ်ပြီးမြောက်ရန် နောက်ဆုံးရက်ကို အနည်းဆုံးတစ်လအထိ တိုးမြှင့်ခဲ့သည်။

ဘယ်လိုရွေးချယ်ရမလဲ။ Habr သည် ခုခံမှုအနည်းဆုံးလမ်းကြောင်းတစ်လျှောက် မကြာခဏ ရွေ့လျားသည်။ အလွတ်သဘောအားဖြင့်၊ စိတ်ကူးမှ ရှေ့ပြေးပုံစံမှ အနည်းဆုံးအထိ သံသရာကို လျှော့ချလိုသည့် ယေဘုယျဆန္ဒတစ်ခုရှိသည်။ ထုတ်ကုန်အပေါ်ထားရှိသော သဘောထားပုံစံသည် booking.com ၏ postulates များကို အနည်းငယ်အောက်မေ့ပြီး Habr သည် သုံးစွဲသူ၏တုံ့ပြန်ချက်ကို ပိုမိုလေးနက်စွာခံယူပြီး ထိုသို့သောဆုံးဖြတ်ချက်များချရန်အတွက် developer တစ်ဦးအနေဖြင့် သင့်အား ယုံကြည်ကြောင်း တစ်ခုတည်းသောကွာခြားချက်မှာဖြစ်သည်။

ဤယုတ္တိဗေဒနှင့် ပြဿနာကို အမြန်ဖြေရှင်းလိုသော ကျွန်ုပ်၏ကိုယ်ပိုင်ဆန္ဒကို လိုက်နာပြီးနောက်၊ ကျွန်ုပ်သည် ကမ္ဘာလုံးဆိုင်ရာ ကိန်းရှင်များကို ရွေးချယ်ခဲ့သည်။ မကြာခဏဆိုသလိုဖြစ်တတ်သည်အတိုင်း၊ သင်သည် ၎င်းတို့အတွက် အနှေးနှင့်အမြန် သို့မဟုတ် နောက်ပိုင်းတွင် ပေးချေရမည်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ချက်ချင်းနီးပါး လစာပေးချေသည်- ကျွန်ုပ်တို့သည် စနေ၊ တနင်္ဂနွေတွင် အလုပ်လုပ်ခဲ့ပြီး အကျိုးဆက်များကို ရှင်းလင်းရေးသားခဲ့သည်။ ခေတ်လွန် ဆာဗာကို အပိုင်းနှစ်ပိုင်းခွဲရန် စတင်ခဲ့သည်။ အမှားသည် အလွန်မိုက်မဲပြီး ၎င်းနှင့်ပတ်သက်သည့် ချို့ယွင်းချက်သည် ပြန်လည်ထုတ်လုပ်ရန် မလွယ်ကူပါ။ ဟုတ်ပါတယ်၊ ဒါက ရှက်စရာပါ၊ ဒါပေမယ့် တစ်နည်းမဟုတ်တစ်နည်း၊ ထိမိ၍လဲစရာ၊ ညည်းတွားရင်း၊ မည်သို့ပင်ဆိုစေကာမူ ကျွန်ုပ်၏ PoC သည် ကမ္ဘာလုံးဆိုင်ရာပြောင်းလွဲနိုင်ချေများနှင့်အတူ ထုတ်လုပ်ရေးသို့ရောက်ရှိသွားပြီး “two-node” ဗိသုကာအသစ်ဆီသို့ ရွှေ့ခြင်းကိုစောင့်ဆိုင်းနေချိန်တွင် အတော်လေးအောင်မြင်စွာအလုပ်လုပ်နေပါသည်။ ဤသည်မှာ အရေးကြီးသော ခြေလှမ်းဖြစ်သည်၊ အကြောင်းမှာ တရားဝင် ပန်းတိုင်ကို အောင်မြင်ခဲ့သည် - SSR သည် လုံးဝ အသုံးပြုရန် အသင့်ရှိသော စာမျက်နှာကို ပေးပို့ရန် သင်ယူခဲ့ပြီး UI သည် များစွာ ငြိမ်သက်လာခဲ့သည်။

refactoring ပထမအဆင့်ပြီးနောက် Mobile Habr မျက်နှာပြင်

အဆုံးစွန်အားဖြင့်၊ မိုဘိုင်းဗားရှင်း၏ SSR-CSR ဗိသုကာသည် ဤပုံသို့ ဦးတည်သည်-

“နှစ်ခု-node” SSR-CSR ဆားကစ်။ Node JS API သည် အပြိုင်အဆိုင် I/O အတွက် အမြဲအဆင်သင့်ရှိပြီး SSR လုပ်ဆောင်ချက်မှ ပိတ်ဆို့ထားခြင်း မရှိပါ၊၊ နောက်ပိုင်းတွင် သီးခြားဥပမာတစ်ခုတွင် တည်ရှိသောကြောင့် ဖြစ်သည်။ Query chain #3 မလိုအပ်ပါ။

ထပ်နေသော တောင်းဆိုမှုများကို ဖယ်ရှားခြင်း။

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

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

ပို့စ်ဖိဒ်သို့ ပြန်သွားခြင်းသည် ဒေတာတောင်းဆိုမှုအသစ်ကို လှုံ့ဆော်စေသည်။

နက်နက်နဲနဲတူးဖို့ မလိုဘူး။ အထက်ဖော်ပြပါ screencast တွင် အပလီကေးရှင်းသည် နောက်သို့ပွတ်ဆွဲသည့်အခါ ဆောင်းပါးများစာရင်းကို ပြန်လည်တောင်းဆိုပြီး ဆောင်းပါးများကို ကျွန်ုပ်တို့ မတွေ့ရတော့ကြောင်း၊ ဆိုလိုသည်မှာ ယခင်ဒေတာသည် တစ်နေရာရာတွင် ပျောက်ကွယ်သွားသည်ကို သင်တွေ့မြင်နိုင်ပါသည်။ ဆောင်းပါးစာရင်း အစိတ်အပိုင်းသည် ဒေသန္တရပြည်နယ်ကို အသုံးပြုပြီး ဖျက်စီးခြင်းတွင် ဆုံးရှုံးသွားပုံရသည်။ တကယ်တော့၊ အပလီကေးရှင်းသည် ကမ္ဘာလုံးဆိုင်ရာအခြေအနေတစ်ခုကို အသုံးပြုသော်လည်း Vuex ဗိသုကာလက်ရာကို ဦးထိပ်ထား၍ တည်ဆောက်ထားပါသည်- မော်ဂျူးများကို စာမျက်နှာများနှင့် ချိတ်ဆက်ထားပြီး၊ လမ်းကြောင်းများနှင့် ချိတ်ဆက်ထားသည်။ ထို့အပြင်၊ မော်ဂျူးများအားလုံးသည် "တစ်ခါသုံး" ဖြစ်သည် - စာမျက်နှာသို့ နောက်ဆက်တွဲလည်ပတ်မှုတိုင်းသည် module တစ်ခုလုံးကို ပြန်လည်ရေးသားသည်-

ArticlesList: [
  { Article1 },
  ...
],
PageArticle: { ArticleFull1 },

စုစုပေါင်း၊ ကျွန်ုပ်တို့တွင် module တစ်ခုရှိသည်။ ဆောင်းပါးစာရင်းအမျိုးအစား အရာဝတ္ထုများ ပါ၀င်သည်။ ဆောင်းပါး နှင့် module စာမျက်နှာဆောင်းပါးအရာဝတ္ထု၏ တိုးချဲ့ဗားရှင်းဖြစ်ခဲ့သည်။ ဆောင်းပါး, ကဲ့သို့သော ဆောင်းပါးအပြည့်အစုံ. ယေဘူယျအားဖြင့်၊ ဤအကောင်အထည်ဖော်မှုသည် သူ့အလိုလို ကြောက်မက်ဖွယ်ကောင်းသောအရာကို မသယ်ဆောင်နိုင်ပေ - ၎င်းသည် အလွန်ရိုးရှင်းသည်၊ လူနုံဟုပင် ဆိုနိုင်သော်လည်း အလွန်နားလည်နိုင်သည်။ လမ်းကြောင်းပြောင်းတိုင်း မော်ဂျူးကို ပြန်လည်သတ်မှတ်ပါက၊ ၎င်းနှင့်ပင် နေထိုင်နိုင်သည်။ သို့သော် ဥပမာအားဖြင့်၊ ဆောင်းပါး feeds များအကြား ရွေ့လျားခြင်း။ /feed → /allကျွန်ုပ်တို့တွင် တစ်ခုသာရှိသောကြောင့် ကိုယ်ရေးကိုယ်တာဖိဒ်နှင့်ပတ်သက်သည့် အရာအားလုံးကို စွန့်ပစ်ရန် အာမခံပါသည်။ ဆောင်းပါးစာရင်းဒေတာအသစ်ထည့်ရန် လိုအပ်သည်။ ၎င်းသည် ကျွန်ုပ်တို့အား တောင်းဆိုမှုများ ထပ်တူထပ်ဖြစ်စေသည်။

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

အဖြေတစ်ခု၏ ယုတ္တိဗေဒကို အဆင့်နှစ်ဆင့်ဖြင့် အကောင်းဆုံးဖော်ပြသည်။ ပထမဦးစွာ ကျွန်ုပ်တို့သည် စာမျက်နှာများမှ Vuex module ကို ပိုင်းဖြတ်ပြီး လမ်းကြောင်းများနှင့် တိုက်ရိုက်ချိတ်ရန် ကြိုးစားသည်။ ဟုတ်ကဲ့၊ စတိုးမှာ ဒေတာအနည်းငယ်ပိုရှိမယ်၊ ရယူသူတွေ နည်းနည်းပိုရှုပ်ထွေးလာမယ်၊ ဒါပေမယ့် ဆောင်းပါးတွေကို နှစ်ကြိမ်တင်မှာ မဟုတ်ပါဘူး။ မိုဘိုင်းဗားရှင်းအတွက်၊ ဤသည်မှာ အပြင်းထန်ဆုံး ငြင်းခုံမှုဖြစ်နိုင်သည်။ ၎င်းသည်ဤကဲ့သို့သောပုံရသည်-

ArticlesList: {
  ROUTE_FEED: [ 
    { Article1 },
    ...
  ],
  ROUTE_ALL: [ 
    { Article2 },
    ...
  ],
}

သို့သော် ဆောင်းပါးစာရင်းများသည် လမ်းကြောင်းများစွာကြားတွင် ထပ်နေနိုင်ပြီး အရာဝတ္ထုဒေတာကို ပြန်သုံးလိုပါက အဘယ်နည်း ဆောင်းပါး ပို့စ်စာမျက်နှာသို့ အသွင်ပြောင်းရန်၊ ဆောင်းပါးအပြည့်အစုံ? ဤကိစ္စတွင်၊ ထိုသို့သောဖွဲ့စည်းပုံကိုအသုံးပြုခြင်းသည် ပို၍ယုတ္တိရှိလိမ့်မည်-

ArticlesIds: {
  ROUTE_FEED: [ '1', ... ],
  ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
  '1': { Article1 }, 
  '2': { Article2 },
  ...
}

ဆောင်းပါးစာရင်း ဤတွင် ၎င်းသည် ဆောင်းပါးများ၏ သိုလှောင်မှု အမျိုးအစားတစ်ခုမျှသာ ဖြစ်သည်။ အသုံးပြုသူစက်ရှင်အတွင်း ဒေါင်းလုဒ်လုပ်ထားသော ဆောင်းပါးများအားလုံးကို။ ဘူတာကြားရှိ မက်ထရိုအတွင်း နာကျင်မှုကြောင့် ဒေါင်းလုဒ်ဆွဲခံထားရသည့် ယာဉ်ကြောအသွားအလာမှာ ၎င်းတို့ကို အစွမ်းကုန် ဂရုတစိုက် ကုသပေးသောကြောင့်ဖြစ်ပြီး၊ သူ့တွင် ရှိပြီးသားဒေတာများကို တင်ခိုင်းခြင်းဖြင့် သုံးစွဲသူအား ဤနာကျင်မှုကို ထပ်မံမဖြစ်စေလိုတော့သည်မှာ သေချာပါသည်။ ဒေါင်းလုဒ်လုပ်ထားသည်။ အရာဝတ္ထုတစ်ခု ဆောင်းပါးများ အရာဝတ္ထုများနှင့် ရိုးရှင်းစွာ ID များ (“links” ကဲ့သို့) array တစ်ခုဖြစ်သည်။ ဆောင်းပါး. ဤဖွဲ့စည်းပုံသည် သင့်အား လမ်းကြောင်းများဆီသို့ ဘုံဒေတာကို ပွားခြင်းနှင့် အရာဝတ္ထုကို ပြန်လည်အသုံးပြုခြင်းမှ ရှောင်ကြဉ်နိုင်စေပါသည်။ ဆောင်းပါး တိုးချဲ့ဒေတာကို ၎င်းထဲသို့ ပေါင်းစည်းခြင်းဖြင့် ပို့စ်စာမျက်နှာတစ်ခုကို တင်ဆက်သည့်အခါ။

ဆောင်းပါးများ၏စာရင်း၏ထွက်ရှိမှုမှာလည်း ပိုမိုပွင့်လင်းလာသည်- iteration အစိတ်အပိုင်းသည် ဆောင်းပါး IDs များဖြင့် array မှတဆင့် ထပ်တလဲလဲလုပ်ဆောင်ကာ ဆောင်းပါး teaser အစိတ်အပိုင်းကို ဆွဲထုတ်ကာ Id ကို prop အဖြစ်ဖြတ်သန်းကာ ကလေးအစိတ်အပိုင်းမှ လိုအပ်သောဒေတာများကို ပြန်လည်ရယူသည်။ ဆောင်းပါးစာရင်း. သင်ထုတ်ဝေသည့်စာမျက်နှာသို့သွားသောအခါ၊ ကျွန်ုပ်တို့သည် ရှိပြီးသားရက်စွဲကို ရရှိသည်။ ဆောင်းပါးစာရင်းကျွန်ုပ်တို့သည် ပျောက်ဆုံးနေသောဒေတာကိုရယူရန် တောင်းဆိုချက်တစ်ခုပြုလုပ်ပြီး ၎င်းကို လက်ရှိအရာဝတ္တုတွင် ရိုးရိုးထည့်ပါ။

ဒီချဉ်းကပ်မှုက ဘာကြောင့် ပိုကောင်းတာလဲ။ အထက်တွင်ရေးခဲ့သည့်အတိုင်း၊ ဤနည်းလမ်းသည် ဒေါင်းလုဒ်လုပ်ထားသောဒေတာနှင့်စပ်လျဉ်း၍ ပိုမိုနူးညံ့သိမ်မွေ့ပြီး ၎င်းကိုပြန်လည်အသုံးပြုရန်ခွင့်ပြုသည်။ သို့သော် ၎င်းအပြင်၊ ၎င်းသည် ထိုသို့သော ဗိသုကာပညာနှင့် ကိုက်ညီသော ဖြစ်နိုင်ခြေအသစ်အချို့ကို လမ်းဖွင့်ပေးသည်။ ဥပမာအားဖြင့်၊ ၎င်းတို့ပေါ်လာသည့်အတိုင်း ဆောင်းပါးများကို ဖိဒ်ထဲသို့ စစ်တမ်းကောက်ယူခြင်းနှင့် တင်ခြင်း။ ကျွန်ုပ်တို့သည် နောက်ဆုံးပေါ်ပို့စ်များကို "သိုလှောင်မှု" တွင် ရိုးရိုးရှင်းရှင်းထားနိုင်သည် ဆောင်းပါးစာရင်းID အသစ်များ၏ သီးခြားစာရင်းကို သိမ်းဆည်းပါ။ ဆောင်းပါးများ ၎င်းအကြောင်းကို အသုံးပြုသူကို အကြောင်းကြားပါ။ ကျွန်ုပ်တို့သည် "ထုတ်ဝေမှုများအသစ်ကိုပြသပါ" ခလုတ်ကိုနှိပ်သောအခါ၊ ကျွန်ုပ်တို့သည် လက်ရှိဆောင်းပါးများစာရင်း၏အခင်းအကျင်း၏အစတွင် Ids အသစ်များကို ရိုးရိုးရှင်းရှင်းထည့်သွင်းပေးမည်ဖြစ်ပြီး အရာအားလုံးသည် အံ့သြဖွယ်ကောင်းလောက်အောင် အလုပ်လုပ်မည်ဖြစ်သည်။

ဒေါင်းလုဒ်ဆွဲခြင်းကို ပိုမိုနှစ်သက်စေသည်။

ပြန်လည်ပြုပြင်သည့် ကိတ်မုန့်ပေါ်ရှိ ရေခဲတုံးသည် အရိုးစုများ၏ အယူအဆဖြစ်ပြီး၊ နှေးကွေးသော အင်တာနက်ပေါ်တွင် အကြောင်းအရာများကို ဒေါင်းလုဒ်လုပ်သည့် လုပ်ငန်းစဉ်ကို အနည်းငယ် စက်ဆုပ်ရွံရှာဖွယ် နည်းပါးစေသည်။ ဤကိစ္စနှင့်ပတ်သက်ပြီး ဆွေးနွေးမှုများမရှိခဲ့ဘဲ စိတ်ကူးမှ ပုံကြမ်းဆီသို့ လမ်းကြောင်းသည် စာသားအတိုင်း နှစ်နာရီကြာသည်။ ဒီဇိုင်းသည် လက်တွေ့ကျကျ ရေးဆွဲထားပြီး ဒေတာစောင့်စဉ်တွင် ရိုးရှင်းပြီး တုန်ခါရုံမျှသာ div block များကို တင်ဆက်ရန် ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများကို သင်ကြားပေးပါသည်။ ပုဂ္ဂလဓိဋ္ဌာန်အားဖြင့်၊ ဤနည်းလမ်းသည် အသုံးပြုသူ၏ခန္ဓာကိုယ်ရှိ စိတ်ဖိစီးမှုဟော်မုန်းပမာဏကို အမှန်တကယ် လျှော့ချပေးပါသည်။ အရိုးစုပုံသဏ္ဍန်မှာ ဤကဲ့သို့ဖြစ်သည်-

Habraloading

ဆင်ခြင်သုံးသပ်ခြင်း။

Habré မှာ ခြောက်လလောက် အလုပ်လုပ်ပြီး သူငယ်ချင်းတွေက မေးသေးတယ်၊ ဟိုမှာ ဘယ်လိုကြိုက်လဲ? ကောင်းပြီ၊ အဆင်ပြေတယ်။ ဒါပေမယ့် ဒီအလုပ်ကို တခြားသူတွေနဲ့ မတူအောင် လုပ်တဲ့အရာတစ်ခုရှိတယ်။ ကျွန်ုပ်သည် ၎င်းတို့၏ထုတ်ကုန်ကို လုံးဝဂရုမစိုက်ဘဲ ၎င်းတို့၏အသုံးပြုသူများ မည်သူမည်ဝါဖြစ်သည်ကို မသိနားမလည်သော အဖွဲ့များတွင် အလုပ်လုပ်ခဲ့သည်။ ဒါပေမယ့် ဒီမှာ အားလုံးက မတူဘူး။ ဒီနေရာမှာ မင်းလုပ်လိုက်တဲ့ကိစ္စအတွက် မင်းမှာ တာဝန်ရှိတယ်လို့ ခံစားရတယ်။ အင်္ဂါရပ်တစ်ခု ဖန်တီးခြင်းလုပ်ငန်းစဉ်တွင် သင်သည် တစ်စိတ်တစ်ပိုင်း ၎င်း၏ပိုင်ရှင်ဖြစ်လာပြီး၊ သင်၏လုပ်ဆောင်နိုင်စွမ်းနှင့်သက်ဆိုင်သည့် ထုတ်ကုန်အစည်းအဝေးများအားလုံးတွင် ပါဝင်ပါ၊ အကြံပြုချက်များနှင့် သင်ကိုယ်တိုင် ဆုံးဖြတ်ချက်များချပါ။ သင်နေ့စဉ်သုံးနေတဲ့ ကုန်ပစ္စည်းတစ်ခုကို ကိုယ်တိုင်ဖန်တီးရတာ အရမ်းမိုက်ပါတယ်၊ ဒါပေမယ့် သင့်ထက် ပိုကောင်းတဲ့သူတွေအတွက် ကုဒ်ရေးတာက မယုံနိုင်လောက်စရာ ခံစားချက်တစ်ခုပါပဲ (အထေ့အငေါ့မရှိ)။

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

ကမ္ဘာလုံးဆိုင်ရာကိန်းရှင်များပြီးနောက် ကျွန်ုပ်တို့သည် ဗိသုကာပညာကိုပြောင်းလဲကာ ပရောက်စီအလွှာကို သီးခြားဥပမာတစ်ခုအဖြစ် ခွဲဝေသတ်မှတ်ရန် ဆုံးဖြတ်လိုက်ရပါသည်။ “two-node” ဗိသုကာသည် အများသူငှာ ဘီတာစမ်းသပ်မှုပုံစံဖြင့် ထုတ်ဝေမှုသို့ ရောက်ရှိနေပြီဖြစ်သည်။ ယခု မည်သူမဆို ၎င်းကို ပြောင်းနိုင်ပြီး မိုဘိုင်း Habr ကို ပိုကောင်းအောင် ကူညီပေးနိုင်ပါသည်။ ဒီနေ့အတွက် ဒီလောက်ပါပဲ။ မင်းရဲ့မေးခွန်းတွေအားလုံးကို comment မှာဖြေဖို့ ငါကျေနပ်တယ်။

source: www.habr.com