Server Component နှင့် Client Component

Next.js App Router ကို သဘောပေါက်သွားစေမယ့် မေးခွန်းတစ်ခုရှိပါတယ်—“ဒီ code က ဘယ်မှာ run သလဲ” ပါ။ Database secret လို server မှာပဲရှိသင့်တာနဲ့ click state လို browser မှာပဲလုပ်နိုင်တာကို ခွဲတတ်ရင် architecture ဆုံးဖြတ်ရ လွယ်သွားပါတယ်။

နားလည်ထားရမယ့် အချက်

Page နဲ့ Layout တွေက default အားဖြင့် Server Components ဖြစ်ပါတယ်။ Server Component က data source အနီးမှာ async/await သုံးနိုင်ပြီး secret ကို browser မပို့ပါဘူး။ useState၊ useEffect၊ event handler၊ window သို့မဟုတ် localStorage လိုရင် file ထိပ်မှာ use client ထည့်ပါ။ Client boundary တစ်ခုထည့်လိုက်ရင် အဲဒီ file ရဲ့ import tree လည်း client bundle ထဲဝင်တာကြောင့် interactive leaf ကိုသာ သေးသေးခွဲထားပါ။

အတူတူ စမ်းရေးကြည့်မယ်

// app/page.tsx — Server Component
import { Counter } from "./counter";
import { getNoteCount } from "@/lib/notes";

export default async function Page() {
  const count = await getNoteCount();
  return <Counter initialCount={count} />;
}

// app/counter.tsx — Client Component
"use client";
import { useState } from "react";

export function Counter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Page က server မှာ note count ယူပြီး Counter ကို number prop အဖြစ်ပို့ပါတယ်။ Counter တစ်ခုတည်းမှာ state နဲ့ click handler ရှိလို့ browser JavaScript လိုအပ်ပါတယ်။ Page တစ်ခုလုံးကို use client လုပ်စရာမလိုပါဘူး။

Server မှရလာသော initial count ပေါ်ပြီး button နှိပ်တိုင်း browser မှာ တိုးမည်။

Next.js — Server and Client Components — Next.js