1~
2React Server Components (RSC) ได้เปลี่ยนแปลงวิธีที่เราสร้างแอปพลิเคชัน React อย่างพื้นฐาน โดยการย้ายตรรกะการ render ไปยังเซิร์ฟเวอร์ เราสามารถลด JavaScript bundle ที่ส่งไปยังไคลเอนต์ได้อย่างมาก ทำให้เวลาโหลดเร็วขึ้นและประสบการณ์ผู้ใช้ดีขึ้น ในบทความนี้ เราจะสำรวจรูปแบบขั้นสูงและแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ประโยชน์จาก RSCs ในปี 2026
3~
4## Server Components คืออะไร?
5~
6ตามธรรมเนียม React components ถูก render ทั้งหมดบนไคลเอนต์ (CSR) หรือ pre-render บนเซิร์ฟเวอร์เป็น HTML (SSR) แล้วจึง hydrate บนไคลเอนต์ **Server Components** ช่วยให้เรา render components _เฉพาะ_ บนเซิร์ฟเวอร์ โค้ดของมันจะไม่ถูกส่งไปยังเบราว์เซอร์เลย
7~
8### ประโยชน์
9~
101.  **ขนาด Bundle เป็นศูนย์**: Dependencies ที่ใช้ใน Server Components (เช่น markdown parsers หรือ date libraries ที่หนัก) อยู่บนเซิร์ฟเวอร์
112.  **เข้าถึง Backend โดยตรง**: คุณสามารถ query ฐานข้อมูลได้โดยตรงภายใน component โดยไม่ต้องเปิดเผย API endpoints
123.  **Code Splitting อัตโนมัติ**: Client components ที่ import จากฝั่งเซิร์ฟเวอร์จะถูก code-split โดยอัตโนมัติ
13~
14## รูปแบบการดึงข้อมูล
15~
16ด้วย RSC คุณสามารถทำ components เป็น `async` และ await ข้อมูลได้โดยตรง
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense สำหรับ Streaming
39~
40เนื่องจากการดึงข้อมูลอาจช้า ให้ wrap components ใน `<Suspense>` เพื่อแสดง fallback UI ทันทีขณะที่ข้อมูลกำลังโหลด
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## การผสม Server และ Client Components
60~
61หนึ่งในแง่มุมที่สับสนที่สุดคือวิธีรวม Server และ Client components เข้าด้วยกัน
62~
63**กฎหลัก**: Server Components สามารถ import Client Components ได้ Client Components _ไม่สามารถ_ import Server Components โดยตรงได้ อย่างไรก็ตาม คุณสามารถส่ง Server Component เป็น `children` ให้ Client Component ได้
64~
65### รูปแบบ "Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## ข้อผิดพลาดทั่วไป
100~
1011.  **ใช้ Context ใน Server Components**: Context เป็นแนวคิดฝั่งไคลเอนต์ หากคุณต้องการแชร์ข้อมูลฝั่งเซิร์ฟเวอร์ ให้ส่งเป็น props หรือใช้ request-scope cache เฉพาะทาง
1022.  **เพิ่ม Event Handlers**: คุณไม่สามารถเพิ่ม `onClick` หรือ `onChange` ให้ Server Component ได้ ตรรกะนั้นอยู่ใน Client Component ที่เป็น leaf node ทั่วไป
103~
104## บทสรุป
105~
106React Server Components ไม่ใช่แค่ฟีเจอร์ มันคือการเปลี่ยนแปลงกระบวนทัศน์ โดยการเข้าใจขอบเขตระหว่างเซิร์ฟเวอร์และไคลเอนต์ คุณสามารถสร้างแอปพลิเคชันที่ทั้งมีการโต้ตอบสูงและเร็วอย่างเหลือเชื่อ
107~