React Server Components (RSC) ได้เปลี่ยนแปลงวิธีที่เราสร้างแอปพลิเคชัน React อย่างพื้นฐาน โดยการย้ายตรรกะการ render ไปยังเซิร์ฟเวอร์ เราสามารถลด JavaScript bundle ที่ส่งไปยังไคลเอนต์ได้อย่างมาก ทำให้เวลาโหลดเร็วขึ้นและประสบการณ์ผู้ใช้ดีขึ้น ในบทความนี้ เราจะสำรวจรูปแบบขั้นสูงและแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ประโยชน์จาก RSCs ในปี 2026
Server Components คืออะไร?
ตามธรรมเนียม React components ถูก render ทั้งหมดบนไคลเอนต์ (CSR) หรือ pre-render บนเซิร์ฟเวอร์เป็น HTML (SSR) แล้วจึง hydrate บนไคลเอนต์ Server Components ช่วยให้เรา render components เฉพาะ บนเซิร์ฟเวอร์ โค้ดของมันจะไม่ถูกส่งไปยังเบราว์เซอร์เลย
ประโยชน์
- ขนาด Bundle เป็นศูนย์: Dependencies ที่ใช้ใน Server Components (เช่น markdown parsers หรือ date libraries ที่หนัก) อยู่บนเซิร์ฟเวอร์
- เข้าถึง Backend โดยตรง: คุณสามารถ query ฐานข้อมูลได้โดยตรงภายใน component โดยไม่ต้องเปิดเผย API endpoints
- Code Splitting อัตโนมัติ: Client components ที่ import จากฝั่งเซิร์ฟเวอร์จะถูก code-split โดยอัตโนมัติ
รูปแบบการดึงข้อมูล
ด้วย RSC คุณสามารถทำ components เป็น async และ await ข้อมูลได้โดยตรง
// app/users/page.tsx import { db } from '@/lib/db'; export default async function UsersPage() { const users = await db.user.findMany(); return ( <main> <h1>Users</h1> <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </main> ); }
Suspense สำหรับ Streaming
เนื่องจากการดึงข้อมูลอาจช้า ให้ wrap components ใน <Suspense> เพื่อแสดง fallback UI ทันทีขณะที่ข้อมูลกำลังโหลด
import { Suspense } from 'react'; import UserList from './UserList'; import LoadingSkeleton from './LoadingSkeleton'; export default function Page() { return ( <section> <h1>My Users</h1> <Suspense fallback={<LoadingSkeleton />}> <UserList /> </Suspense> </section> ); }
การผสม Server และ Client Components
หนึ่งในแง่มุมที่สับสนที่สุดคือวิธีรวม Server และ Client components เข้าด้วยกัน
กฎหลัก: Server Components สามารถ import Client Components ได้ Client Components ไม่สามารถ import Server Components โดยตรงได้ อย่างไรก็ตาม คุณสามารถส่ง Server Component เป็น children ให้ Client Component ได้
รูปแบบ "Children"
// ClientComponent.tsx 'use client'; import { useState } from 'react'; export default function ClientWrapper({ children }) { const [count, setCount] = useState(0); return ( <div onClick={() => setCount((c) => c + 1)}> Count: {count} {children} {/* This can be a Server Component! */} </div> ); }
// ServerPage.tsx import ClientWrapper from './ClientWrapper'; import ServerContent from './ServerContent'; export default function Page() { return ( <ClientWrapper> <ServerContent /> {/* This works perfectly */} </ClientWrapper> ); }
ข้อผิดพลาดทั่วไป
- ใช้ Context ใน Server Components: Context เป็นแนวคิดฝั่งไคลเอนต์ หากคุณต้องการแชร์ข้อมูลฝั่งเซิร์ฟเวอร์ ให้ส่งเป็น props หรือใช้ request-scope cache เฉพาะทาง
- เพิ่ม Event Handlers: คุณไม่สามารถเพิ่ม
onClickหรือonChangeให้ Server Component ได้ ตรรกะนั้นอยู่ใน Client Component ที่เป็น leaf node ทั่วไป
บทสรุป
React Server Components ไม่ใช่แค่ฟีเจอร์ มันคือการเปลี่ยนแปลงกระบวนทัศน์ โดยการเข้าใจขอบเขตระหว่างเซิร์ฟเวอร์และไคลเอนต์ คุณสามารถสร้างแอปพลิเคชันที่ทั้งมีการโต้ตอบสูงและเร็วอย่างเหลือเชื่อ