What Are React Server Components, Server Actions? A Simple Guide

React က သူရဲ့ ပွဲဦးထွက်မှာ Client Side JavaScript Libraries အနေနဲ့ ထွက်ပေါ်ခဲ့တာပါ။ ဆယ်စုနှစ်တလျှောက် ပိုပြီးကောင်းမွန်အောင် ပြင်ဆင်လာခဲ့ရင်း အခုဆို React Version 19 အထိ ရောက်ရှိလာပါတယ်။ React 18 ထွက်ရှိခဲ့ပြီး နောက်ပိုင်းကတည်းက React 19 အတွက် ပါဝင်လာနိုင်မယ့် Experimental API အသစ်တွေ၊ Hook အသစ်တွေနဲ့ Depreciated API တွေကို ကြေညာထားခဲ့တာပါ။ ဆိုတော့ အဲဒီနောက်ပိုင်းမှာ React Server Components, Server Actions စတဲ့ ဝေါဟာရတွေက Community ကြားမှာ တော်တော်လေး ပေါက်ခဲ့ပါတယ်။ တချို့ Experimental Feature တွေကို NextJS မှာ အသုံးပြုလို့ရအောင် ကြိုတင်ထည့်သွင်းပေးခဲ့ပါသေးတယ်။ ဒီဆောင်းပါးမှာတော့ React 19 မှာ အသစ်ပါဝင်လာတဲ့ Update တွေထက် React Server Component တွေ၊ React Server Action တွေနဲ့ Form Action တွေအကြောင်းကိုသာ အဓိကပြောပြသွားပါမယ်။

React Server Components: Bridging the Client-Server Divide

React Server တွေအကြောင်းမပြောခင် React ရဲ့ သမရိုးကျ Component တွေအကြောင်းကို အရင်ပြောပါမယ်။ React က Client-Server Architecture ကို အသုံးပြုပါတယ်။ React Component တွေဟာ JavaScript Object တွေဖြစ်တာနဲ့အညီ Browser ပေါ်မှာပဲ အလုပ်လုပ်ရပါတယ်။ JavaScript Bundles တွေကို Download လုပ်ပြီးမှသာ UI ကို Render လုပ်ပေးရတာပါ။ ဒီအတွက်ကြောင့် JavaScript ကုဒ်တွေကို Fully Download လုပ်ဖို့အတွက် User ဖက်က အချိန်တခုစောင့်ဆိုင်းပေးရမှာပါ။ ဒီအခင်းအကျင်းကို ပြောင်းလဲပေးနိုင်ဖို့ React Server Component (RSC) တွေကို မိတ်ဆက်ပေးလာပါတယ်။ RSC တွေက Server ဖက်အခြမ်းမှာ Render လုပ်ပါတယ်။ အဲဒီနောက် JavaScript ကုဒ်တွေကို ပို့ပေးမယ့်အစား Server ဖက်မှာ ကြိုတင် Render လုပ်ထားတဲ့ HTML Content တွေကို ပို့ပေးလာမှာပါ။ ဒါဟာ Browser စခရင်ပေါ်မှာ Render လုပ်ရမယ့်အချိန်ကို သိသိသာသာ လျော့ချပေးနိုင်ပါတယ်။

RSC တွေရဲ့ အားသာချက်က ဒီတချက်တည်းတော့မဟုတ်ပါဘူး။ Server Side Capability တွေဖြစ်တဲ့ Database Accessing လိုမျိုး၊ API Fetching လိုမျိုး လုပ်ဆောင်ချက်တွေကို အသက်သာဆုံးလုပ်ဆောင်ပေးနိုင်ပါတယ်။

ခြွင်းချက်အနေနဲ့ RSC တွေမှာ User Interactivity တွေကို Handle လုပ်နိုင်စွမ်းတော့မရှိနိုင်တော့ပါဘူး။ ဥပမာ၊ useEffect တို့၊ useState တို့လို့ Hook တွေကို Server Component တွေမှာ သုံးလို့မရနိုင်တော့ပါဘူး။

နမူနာအနေနဲ့ Most Popular Product တွေကို ပြသပေးတဲ့ အရိုးရှင်းဆုံး Component တခုကို စဉ်းစားကြည့်ပါ။ အဆိုပါ Component ကို RSC အဖြစ် အသုံးပြုလိုက်မယ်ဆိုရင် Data-Fetching နဲ့ Rendering အပိုင်းကို Server ဖက် အခြမ်းမှာ သက်သက်သာသာ လုပ်ဆောင်နိုင်သွားမှာဖြစ်တဲ့အတွက် Client အနေနဲ့ စီစဉ်ထားပြီးသား Assembled HTML Snippet ကိုသာ လက်ခံလိုက်ရုံပါပဲ။

Server Actions: Simplifying the Backend Round Trip

Server Action တွေအကြောင်း ဆက်ပါမယ်။ လက်ရှိ Modern Web App တွေမှာ Server နဲ့ အမြဲတစေ ဆက်သွယ်ပြုလုပ်ရတဲ့ Operation တွေ ရှိပါတယ်။ ဥပမာ၊ Sign In / Sign Out လုပ်တာမျိုး၊ Profile ပြောင်းလဲ ပြုပြင်တာမျိုးတွေပါ။ ယေဘုယျအားဖြင့် ဒီလိုမျိုး Operation တွေကို REST သို့မဟုတ် GraphQL APIs Endpoint တွေ အသုံးပြုပြီး Client ဖက်က လုပ်ဆောင်ရပါတယ်။

ဒီလိုမျိုး ရှုပ်ထွေးတဲ့ Client ဖက်က လုပ်ဆောင်ချက်တွေကို အစားထိုးနိုင်ဖို့ ရည်ရွယ်ပြီး Server Action တွေကို မိတ်ဆက်ပေးခဲ့တာပါ။ တနည်းအားဖြင့် Server Action တွေကို "Server ပေါ်မှာ တွက်ချက်လုပ်ဆောင်ပေးမယ့် Asynchronous Function တွေ" လို့ မှတ်ယူနိုင်ပါတယ်။ (Server Function တွေလို့လည်းခေါ်ပါတယ်။) Server Action တွေကို Server Component နဲ့ Client Component နှစ်ခုစလုံးကနေ ခေါ်ယူသုံးစွဲနိုင်ပါတယ်။ အထူးသဖြင့် Form Submission တွေနဲ့ Data Mutation လုပ်ဆောင်ချက်တွေအတွက် ပိုသင့်တော်ပါတယ်။ Server Action တွေရဲ့ အားသာချက်က ဘယ် Component ကနေမဆို (Client ဖြစ်စေ၊ RSC ဖြစ်စေ) လှမ်းယူသုံးစွဲနိုင်ပြီး တခါတည်း Invoke လုပ်ပေးနိုင်တာပါ။ API Endpoint တွေသုံးပြီး Manual Operation တွေ ရေးသားရတာ၊ Serializing နဲ့ Deserializing လုပ်ရတာ စသည်ဖြင့် ဖန်တရာထပ်နေတဲ့ လုပ်ငန်းစဉ်တွေကို Server Action တွေက အစားထိုးပေးသွားတာပါ။ အကောင်းဆုံးအချက်ကတော့ အဆိုပါ Function တွေဟာ Type Safe ဖြစ်သလို React App တခုလုံးနဲ့ လည်း Tightly Integrated ဖြစ်နေတဲ့အချက်ပါပဲ။

ဒီ Function တွေကို အသုံးပြုဖို့အတွက်ဆိုရင် "use server" ဆိုတဲ့ Directive ကို အသုံးပြုရပါမယ်။ များသောအားဖြင့် RSC တွေမှာ တိုက်ရိုက် အသုံးပြုနိုင်ပါတယ်။ Client Component တွေက သုံးစွဲမယ်ဆိုရင် Module Level အဖြစ်သာ ခေါ်ယူနိုင်မှာပါ။ Client Component ရဲ့ prop အနေနဲ့ ထည့်သွင်းပေးပို့လိုက်ရင်လည်း ရပါတယ်။ Server ဖက်က Data တွေကို Client Component ဆီ တိုက်ရိုက် prop အနေနဲ့ ထည့်သွင်းပေးပို့ဖို့ဆိုတာ Security ပိုင်းအရ Risk များပါတယ်။ ဒီနေရာမှာ Security Consideration အတွက် Awareness တွေရှိထားဖို့လိုပါမယ်။ အဲအတွက်လည်း React ရဲ့ Experimental API တွေဖြစ်တဲ့ experimental_taintUniqueValue နဲ့ experimental_taintObjectReference တွေကို စမ်းသပ်အသုံးပြုနိုင်ပါတယ်။

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

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

// Old way
fetch('/api/updateUser', { method: 'POST', body: JSON.stringify(data) });

Server Action ကို အသုံးပြုတဲ့အခါ Developer တွေအတွက် ပိုပြီးသက်တောင့်သက်သာ ဖြစ်လာပါတယ်။ ပုံမှန် Function တခုကို ခေါ်ယူသလို သုံးစွဲလိုက်ရုံနဲ့ Networking, Validation, Execution စတဲ့လုပ်ငန်းစဉ်တွေကို နောက်ကွယ်ကနေ တခါတည်း လုပ်ဆောင်ပေးသွားမှာပါ။

// New way
const updateUser = async (userData) => {  'use server'; // This runs on the server!  await db.updateUser(userData);};

useActionState: Evolving Forms Interaction in React 19

React Server Action တွေကို Event Handler တွေ၊ <button> နဲ့ <form> Element တွေ၊ useEffect Hook အပြင် တခြားသော Third-party Library တွေကနေပါ ခေါ်ယူသုံးစွဲနိုင်ပါတယ်။ Form Submission ပြုလုပ်လိုတဲ့အခါ <form> Element ရဲ့ 'action' Attribute ကနေ Server Action တွေကို တိုက်ရိုက် ခေါ်ယူ Invoke လုပ် သုံးစွဲနိုင်ပါတယ်။

ဒီနေရာမှာ သိပ်မကြာသေးခင်က မိတ်ဆက်ပေးလာတဲ့ useActionState Hook အကြောင်းကို ဆက်ပြောပါမယ်။ Server Action တွေကြောင့် လွယ်ကူလာတဲ့ Form Handling လုပ်ငန်းစဉ်ဟာ useActionState Hook ကြောင့် လွယ်ကူတာထက် ပိုတဲ့အခြေအနေတရပ်ကို ရောက်ရှိသွားပါတယ်။ (useActionState မတိုင်ခင်က useFormState ကို အရင်မိတ်ဆက်ပေးခဲ့ပေ့မယ်၊ အခုအခါ useFormState ကို Depreciated အဖြစ်ကြေညာထားပါပြီ။)

useActionState က Form Action ရဲ့ Result ပေါ်မူတည်ပြီး State တွေကို Update လုပ်ပေးနိုင်တဲ့ Hook တခုပါ။ သာမန်အားဖြင့် Parameter နှစ်ခုပေးရပါမယ်။ ပထမတခုက Server Function (တနည်းအားဖြင့် Server Action) ဖြစ်ပြီး ဒုတိယတခုက Initial State တန်ဖိုးဖြစ်ပါတယ်။ useActionState ကနေ state, formAction နဲ့ isPending ဆိုတဲ့တန်ဖိုးသုံးခုပါဝင်တဲ့ Array တခုကို Return ပြန်ပေးမှာပါ။

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

useActionState Hook ရဲ့ ပထမ Argument အဖြစ် Pass ပေးရမယ့် Function ဟာ Server Function ဖြစ်ရပါမယ်။ အဆိုပါ Server Function မှာ Parameter နှစ်ခုလက်ခံပေးရပါမယ်၊ previousState နဲ့ formData ပါ။

သတိထားရမှာက useActionState Hook ကို Client ဖက်မှာသာ ခေါ်ယူအသုံးပြုနိုင်တဲ့အချက်ပါ။

ယေဘုယျအားဖြင့် React မှာ Form Data တွေကို Manage လုပ်ရတဲ့အပိုင်းဟာ ခက်ခဲပင်ပန်းတယ်လို့ ဆိုလို့ရပါတယ်။ Input တွေကို Validate လုပ်ရတာ၊ Serialization လုပ်ရတာ၊ Server ဆီကို API Call တွေကဆင့် ပေးပို့ရတာ၊ ပြန်ရလာတဲ့ Response ဒေတာတွေကို Handle လုပ်ရတာ၊ သက်ဆိုင်ရာ Error Message ဒါမှမဟုတ် Success Message တွေကို ပြသပေးရတာ စသည်ဖြင့် ခက်ခဲရှုပ်ထွေးပါတယ်။

ဒီပြဿနာတွေကို Server Action ရဲ့ပံ့ပိုးမှုနဲ့အတူ useActionState Hook က ကုဒ်ပမာဏအနည်းဆုံးနဲ့ ဖြေရှင်းပေးသွားပါတယ်။

နမူနာအနေနဲ့ useActionState Hook ကို အသုံးပြုထားတဲ့ Contact Form တခုကို ဖော်ပြထားပါတယ်။

//action.js

"use server";

async function handleSubmit(previousState, formData) {

    await db.createContact(formData); // This automatically saves the data to the database

    return {message: 'Form submitted successfully!'};

  }

//ContactForm.jsx

'use client'; 

import { createContact } from './actions'; // An imported Server Action

export default function ContactForm() {

    const [state, formAction] = useActionState(createContact, {message:""});

  return (

    <form action={formAction}>

      <input type="text" name="name" placeholder="Your Name" required />

      <input type="email" name="email" placeholder="Your Email" required />

      <button type="submit">Submit</button>

    </form>

{state.message && (<p>{state.message}</p>)}

  );

}

နမူနာကုဒ်မှာ createContact ဆိုတဲ့ Server Action ကို Form Action ကနေ တိုက်ရိုက်ခေါ်ယူ Invoke လုပ်လိုက်တာပါ။

API layers တွေ၊ Client-Server Communication တွေကို သီးခြားရေးသားနေဖို့ မလိုအပ်တော့ပါဘူး။ React က Form Data Serialization ကိုလည်း အလိုအလျှောက် ကိုင်တွယ်ဖြေရှင်းပေးသွားမှာပါ။

React Server Components နဲ့ Server Action တွေဟာ Server-First Architecture ကို ပြန်လည် ဦးတည်လာခဲ့တာပါ။ အထူးသဖြင့် Community လိုအပ်ချက်အပေါ်မူတည်ပြီး ပြင်ဆင်လာခဲ့တဲ့ React ရဲ့ သိသာတဲ့ပြောင်းလဲမှုတွေလို့ ဆိုရမှာပါပဲ။ JavaScript ရဲ့ Declarative သဘောတရားကိုလည်း ပိုပြီး ထိန်းသိမ်းလာသလို၊ မလိုအပ်ဘဲ ခေါ်ယူသုံးစွဲနေရတဲ့ Third-Party Dependency တွေကိုပါ သိသိသာသာ လျော့ချပေးလာမှာပါ။ ပိုပြီးကောင်းမွန်တဲ့ကုဒ်အရည်အသွေး၊ Developer Experience နဲ့ User Experience တွေအပြင် အသက်သာဆုံး Ship လုပ်ပေးနိုင်တဲ့ ရလာဒ်တွေ ရှိလာပါတယ်။ ဒီတော့ မပြီးဆုံးနိုင်သေးတဲ့ JavaScript ခရီးစဉ်နဲ့အတူ အနာဂါတ် Web Development က ဘယ်လိုမျိုး ပြောင်းလဲလာဦးမလဲဆိုတာ စောင့်ကြည့်ရမှာပါပဲ။

#CodeWithThura