မကြာခင် MERN Stack Course Launch လုပ်တော့မှာဖြစ်ပါတယ်။

3
1644

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 တစ်ခုရလာမှာဖြစ်ပါတယ်

နောက်တစ်ပိုင်းကတော့ကျွန်တော် ဖြစ်ချင်တာလေးကို အရင်ပြောပြပါမယ်


  1. ကျွန်တော်က react သီးသန့်မသုံးချင်ပါဘူး ဘာဖြစ်လို့လည်းဆိုတော့ performace ရယ် seo ကို focus လုပ်ချင်လို့ပါ
  2. ကျွန်တော်က jquery ကို lazy load အတွက် မရေးချင်ပါဘူး အဲ့နေရာမှာ react router and react component ကိုသုံးချင်ပါတယ်
  3. website ရဲ့ page တစ်ခုလုံးက server ကလာတာဖြစ်ပီး တချို့အစိတ်အပိုင်းတွေကတော့ single page applicationပုံစံကိုသွားချင်ပါတယ်ဒီနေရာမှာသတိချပ်စေချင်တာက laravel route တစ်ခုလုံးကို react router ကိုပေးလို့မရပါဘူး ဒီ apporach က single page applicationပဲဖြစ်သွားပါလိမ့်မယ် ဒါကြောင့် ဒီနေရာမှာ react ရဲ့ hash router ကိုသုံးရပါလိမ့်မယ်
  4. ကျွန်တော်က npm က react component တွေကိုလည်းအလွယ်တကူယူသုံးချင်ပါသေးတယ်
  5. 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 လောက်သာ

    ရှိပါတယ်

























Comment:
Please Login To Create Comment Login
Loading...
Michael Jangma 4 months ago laravel , react vite video လေးပြန်တင်ပေးပါလားဗျ
Ye Min 1 year ago database နဲ့ တွဲချင်ရင်ဘယ်လိုလုပ်ရလဲဗျ laravel react mixမှာလေ
FullStack DEV 2 years ago Thanks You Bro