Laravel + React SSR Apporach
Myo Thant Kyaw
ခေါင်းစဉ်ကလည်းဘယ်လိုပေးရမယ်မသိဘူးဖြစ်နေတယ်
စိတ်ဝင်စားမှပဲလိုက်ဖတ်ပီးလိုက်စမ်းကြည့်ပါ
မေးချင်တာရှိရင် ဒီပိုစ်comment မှာ မေးထားနိုင်ပါတယ်ဗျ။
SSRနဲ့ CSR ကို video နဲ့ တစ်မျိုး article နဲ့ တစ်မျိုးကျွန်တော်အရင်ကပြောပြခဲ့ပါတယ်။
fullstack dev youtube channel က vuejs ပထမဆုံး video မှာရှိပါတယ်
အခု ကျွန်တော်တို့ laravel + inertia သုံးပီး single page application ရေးလို့ရတာ သိလောက်ပီး
ဖြစ်မှာပါ နောက်ထပ် option တစ်မျိုးရှိနေပါသေးတယ် jquery alternative react or vue ကိုသုံးဖို့ ပါ
ဒါပေမဲ့ jquery ကလည်း ssr ရေးတဲ့အခါ မပါလို့မရတဲ့ဟာတစ်ခုပါ animation libiary တွေ markdown editor
တွေ jquery နဲ့ သုံးထားတာတွေက အများစုဖြစ်နေလို့ပါ
အခုကျွန်တော်တို့က laravel ထဲမှာ react ကိုသုံးကြည့်ပါမယ်
ကောင်းကြိုးတွေက ux အရမ်းမိုက်သွားမယ် react developer တွေအတွက် code ရေးရတာ အရမ်းသပ်ရပ်သွားမယ်
data တွေကို lzay load လုပ်တဲ့အခါ jquery နဲ့ မျက်စိနောက်အောင်မရေးရတော့ဘူးပေါ့
နောက်ပီး full server side render application တစ်ခုရလာမှာဖြစ်ပါတယ်
နောက်တစ်ပိုင်းကတော့ကျွန်တော် ဖြစ်ချင်တာလေးကို အရင်ပြောပြပါမယ်
- ကျွန်တော်က react သီးသန့်မသုံးချင်ပါဘူး ဘာဖြစ်လို့လည်းဆိုတော့ performace ရယ် seo ကို focus လုပ်ချင်လို့ပါ
- ကျွန်တော်က jquery ကို lazy load အတွက် မရေးချင်ပါဘူး အဲ့နေရာမှာ react router and react component ကိုသုံးချင်ပါတယ်
- website ရဲ့ page တစ်ခုလုံးက server ကလာတာဖြစ်ပီး တချို့အစိတ်အပိုင်းတွေကတော့ single page applicationပုံစံကိုသွားချင်ပါတယ်ဒီနေရာမှာသတိချပ်စေချင်တာက laravel route တစ်ခုလုံးကို react router ကိုပေးလို့မရပါဘူး ဒီ apporach က single page applicationပဲဖြစ်သွားပါလိမ့်မယ် ။ ဒါကြောင့် ဒီနေရာမှာ react ရဲ့ hash router ကိုသုံးရပါလိမ့်မယ်
- ကျွန်တော်က npm က react component တွေကိုလည်းအလွယ်တကူယူသုံးချင်ပါသေးတယ်
- single page appliction တွေက root directory တစ်ခုပဲရှိပါတယ်ကျွန်တော်က ကျွန်တော်ကြိုက်တဲ့ ဘယ်လို directory မျိုးမှာမဆို react component ကို render လုပ်ချင်ပါတယ်
နောက်ပီး တစ်ခုထက်ပိုတဲ့ root directory တွေမှာ react component တွေကိုသုံးချင်ပါတယ် ။
အထက်ကလေးချက်က ကျွန်တော်လိုချင်တဲ့အဓိကအချက်တွေဖြစ်ပီး mmcoder website ကိုလည်းအဲ့ပုံစံ ရေးနေတာဖြစ်ပါတယ် ။
ပီးတော့မပီးသေးပါဘူး သိပ်စိတ်မပါဘူးဖြစ်နေလို့(ဟဟ)
စလိုက်ရအောင်
laravel မှာ mix ဆိုတဲ့ package တစ်ခုရှိပါတယ် laracast founder က ဖန်တိးပေးထားတာပါ
mix ရဲ့သဘောတရားက ဘယ်လိုလည်းဆိုတော့ ရှင်းရှင်းလေးပြောရရင် ကျွန်တော်တို့ရေးထားတဲ့ js or css file ကို mix
နဲ့ single file or minified version ကိုထုတ်ပေးနိုင်ပါတယ်
ကျွန်တော်တို့ custom js file နဲ့ frontend asset တွေကို ပေါင်းပေးတယ် mix ပေးတယ်ဆိုလိုတာပါ။
frontend asset(read or vue or svelte or angular) တွေကိုပါတစ်ခါထည်းထိန်းချုပ်ဖို့ mix ကအသင့်ပါ
အဲ့လိုဆို laravel 8 project လေးတစ်ခုမြန်မြန်ယူပီး အောက်ကအတိုင်းလိုက်ရေးကြည့်ပါ
laravel မှာ react ကိုအသုံးပြုနိုင်ဖို့
webpack.mix.js မှ
<script>mix.js("resources/js/app.js", "public/js").postCss("resources/css/app.css", "public/css", [//]).react();script>
အထက်ကအတိုင်းပြင်ရေးပေးပါ ပီးရင် yarn install နဲ့ node_modules အားလုံးသွင်းလိုက်ပါ။
ပီးရင် yarn add react-dom react-router-dom
package 2 ခု ကို install လုပ်ပေးပါ ။ ဒါက root directory မှာreact component ကို render လုပ်ဖို့ရယ်
react hash-router ကိုအသုံးပြုဖို့ရယ်ဖြစ်ပါတယ်။
resources/view/app.blade.php ဆောက်ပါ
အဲ့မှာ html syntax တွေတော့ကိုယ်တိုင်ရေးလိုက်ပါ
<body><a href="/blog">Blogsa><div id="root">div><script src="{{asset('js/app.js')}}">script>body>html>
js/app.js က mix ကနေထွက်လာမဲ့ asset file ဖြစ်ပါတယ်
div ထဲမှာ ကျွန်တော်တို့ရေးထားတဲ့ react component တွေကို run မှာ ဖြစ်ပါတယ် ။
နောက်ထက် ကြိုက်တဲ့ blade file and ကြိုက်တဲ့ root element တစ်ခုမှာ react component တွေ run နိင်ပါသေးတယ် ။
react component တချို့ ရေးပါမယ်
resources/js/app.js မှာ အောက်က react router နဲ့ component code တချို့ရေးပါ
import React from "react";import {HashRouter as Router,Switch,Route,Link} from "react-router-dom";export default function HomeComponent() {return (<Router><div><ul><li><Link to="/">HomeLink>li><li><Link to="/about">AboutLink>li><li><Link to="/dashboard">DashboardLink>li>ul><hr /><Switch><Route exact path="/"><Home />Route><Route path="/about"><About />Route><Route path="/dashboard"><Dashboard />Route>Switch>div>Router>);}function Home() {return (<div><h2>Homeh2>div>);}function About() {return (<div><h2>Abouth2>div>);}function Dashboard() {return (<div><h2>Dashboardh2>div>);}if (document.getElementById("root")) {let container = document.getElementById("root");ReactDOM.render(<HomeComponent />, container);}
နောက်တစ်ဆင့်
php artisan serve
yarn watch
လုပ်ပီး browserမှာ run ကြည့်လိုက်ပါ
အထက်ကကျွန်တော်လိုချင်တဲ့အချက်တွေ အဆင်ပြေသွားပါပီ
ကျွန်တော်တို့က multiple mix file တွေဖန်တီးပီး
သက်ဆိုင်ရာ mix file မှာ react router and comopnent တွေရေးရပါမယ်
သက်ဆိုင်ရာblade file မှာ သက်ဆိုင်ရာ mix file ကိုချိတ်ပေးခြင်းဖြင့် performace ကိုလည်းထိမ်းသိမ်းထားနိုင်ပါတယ်
mix file တစ်ခုကို minified လုပ်ထားပီး file size ကို 200 နဲ့ 250kb ကြားမှာပဲရှိနေလို့ ဒီပမာန က bootstrap 5 css file လောက်သာ
ရှိပါတယ် ။
Ajax