Programming

React Server Components Guide

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

React Server Components Guide คืออะไร / ทำไมถึงสำคัญ

น้องๆ หลายคนอาจจะเคยได้ยินคำว่า React Server Components (RSC) กันมาบ้างแล้ว พี่บอกเลยว่ามันไม่ใช่ของเล่นใหม่ แต่เป็นวิวัฒนาการที่สำคัญของ React ที่จะเปลี่ยนวิธีที่เราสร้างเว็บแอปพลิเคชันไปเลย

สมัยก่อนตอนพี่ทำ SiamCafe.net เนี่ย ทุกอย่างมันอยู่บน Server หมดแหละ HTML ล้วนๆ แต่พอ React มา เราก็ย้าย logic ไปอยู่ Client เยอะขึ้น แต่ RSC เนี่ย มันพยายามเอา logic บางส่วนกลับไป Server เพื่อให้เว็บเราเร็วขึ้น และจัดการง่ายขึ้นด้วย

RSC ทำให้เราสามารถ render components บางตัวบน Server แทนที่จะเป็น Client ได้ ซึ่งมันมีข้อดีหลายอย่างเลยนะ:

• Performance ดีขึ้น: เพราะไม่ต้องส่ง JavaScript ไปให้ Client ประมวลผลเยอะ ลดขนาด Bundle size ไปได้เยอะ
• SEO ดีขึ้น: Search engine bot เข้ามาเก็บข้อมูลได้ง่ายขึ้น เพราะเนื้อหาถูก render ไว้บน Server แล้ว
• Security ดีขึ้น: Logic บางอย่างที่ sensitive (เช่น database credentials) สามารถเก็บไว้บน Server ได้อย่างปลอดภัย
• พัฒนาได้ง่ายขึ้น: เราสามารถใช้ backend resources (เช่น database) ใน components ได้โดยตรง ไม่ต้องสร้าง API เพิ่ม

พื้นฐานที่ต้องรู้

ก่อนจะไปลงมือทำ พี่ขอปูพื้นฐานให้น้องๆ นิดนึงก่อนนะ จะได้ไม่งงตอนเขียนโค้ดจริง

Server Components vs. Client Components

React Server Components กับ Client Components ต่างกันยังไง? ง่ายๆ เลย Server Components จะทำงานบน Server ส่วน Client Components จะทำงานบน Browser

Server Components:

• Render บน Server
• เข้าถึง backend resources ได้โดยตรง
• ไม่สามารถใช้ state หรือ lifecycle methods ได้
• เหมาะสำหรับ UI ที่ไม่ต้องมีการ interaction กับผู้ใช้มากนัก

// Server Component
import { db } from './db';

async function MyServerComponent() {
  const data = await db.getData();
  return <div>{data}</div>;
}

export default MyServerComponent;

Client Components:

• Render บน Browser
• ใช้ state และ lifecycle methods ได้
• เหมาะสำหรับ UI ที่มีการ interaction กับผู้ใช้

// Client Component
'use client';

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

Suspense

Suspense เป็น feature ที่ช่วยให้เราจัดการ loading state ได้ง่ายขึ้น เวลาที่เรา fetch data จาก Server มันอาจจะใช้เวลาสักพัก Suspense จะช่วยให้เราแสดง placeholder หรือ loading message ในระหว่างนั้นได้

<Suspense fallback={<p>Loading...</p>}>
  <MyServerComponent />
</Suspense>

วิธีใช้งาน / เริ่มต้นยังไง

เริ่มต้นใช้งาน React Server Components ไม่ยากอย่างที่คิดนะ พี่จะสอนน้องๆ ทีละขั้นตอนเลย

ขั้นตอนปฏิบัติจริง

สร้าง Project ใหม่ด้วย Next.js

Next.js เป็น framework ที่ support React Server Components ตั้งแต่แรก ดังนั้นเราจะใช้ Next.js ในการสร้าง project ของเรา

npx create-next-app@latest my-rsc-app
cd my-rsc-app

สร้าง Server Component

สร้าง component ใหม่ แล้วไม่ต้องใส่ 'use client' directive นั่นแหละคือ Server Component ของเรา

// app/components/MyServerComponent.js
import { getData } from '../lib/data';

async function MyServerComponent() {
  const data = await getData();
  return <div>{data}</div>;
}

export default MyServerComponent;

สร้าง Client Component

ถ้า component ไหนต้องมีการ interaction กับผู้ใช้ ให้ใส่ 'use client' directive ไว้ที่ด้านบนของไฟล์

// app/components/MyClientComponent.js
'use client';

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

รวม Server Component และ Client Component

เราสามารถ import และใช้ Client Component ใน Server Component ได้

// app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

export default function Home() {
  return (
    <main>
      <MyServerComponent />
      <MyClientComponent />
    </main>
  );
}

อย่าลืมลองเข้าไปดู SiamCafe Blog นะ พี่มีบทความอื่นๆ ที่น่าสนใจอีกเยอะเลย

เปรียบเทียบกับทางเลือกอื่น

React Server Components ไม่ใช่ทางเลือกเดียวในการสร้างเว็บแอปพลิเคชัน ยังมีทางเลือกอื่นๆ อีกมากมาย เช่น Client-Side Rendering (CSR), Server-Side Rendering (SSR), และ Static Site Generation (SSG) พี่จะเปรียบเทียบให้เห็นภาพกันชัดๆ เลย

Feature	CSR	SSR	SSG	RSC
Rendering Location	Client	Server	Build Time	Server & Client
Performance	Initial load slow	Better initial load	Fastest initial load	Optimized load, selective rendering
SEO	Poor	Good	Excellent	Good, with potential for improvement
Data Fetching	Client-side	Server-side	Build time	Server-side, direct access to backend
Complexity	Simple	More complex	Simple	Complex, requires understanding of server/client boundaries

จากตารางข้างบน จะเห็นว่าแต่ละทางเลือกก็มีข้อดีข้อเสียต่างกันไป RSC เป็นทางเลือกที่น่าสนใจสำหรับเว็บแอปพลิเคชันที่ต้องการ performance ที่ดี, SEO ที่ดี, และความสามารถในการเข้าถึง backend resources ได้โดยตรง

ถ้าใครอยากรู้เรื่องราวสมัยพี่ทำร้านเน็ต SiamCafe.net ใหม่ๆ ลองเข้าไปอ่านใน SiamCafe Blog ได้นะ มีเรื่องเล่าสนุกๆ เพียบเลย

🎬 วิดีโอแนะนำ

ดูวิดีโอเพิ่มเติมเกี่ยวกับReact Server Components Guide:

Best Practices / เคล็ดลับจากประสบการณ์

เอาล่ะน้องๆ มาถึงตรงนี้แล้ว แสดงว่าเริ่มจับ React Server Components ได้แล้วใช่มั้ย? สมัยผมทำร้านเน็ตฯ นี่นะ เทคนิคพวกนี้สำคัญมาก เพราะเครื่องลูกข่ายสเปคไม่แรง ถ้าโค้ดเราดี แอปฯ ก็ลื่นหัวแตก (ในยุคนั้นนะ ฮ่าๆ)

ผมจะเน้นย้ำเรื่อง Performance เป็นพิเศษ เพราะมันคือหัวใจของ Server Components เลย ลองคิดดูดิ ถ้าเราเอา Component ที่ไม่ต้อง Re-render บ่อยๆ ไปไว้บน Server มันจะช่วยลดภาระ Client ได้เยอะมาก

3-4 เทคนิคที่ใช้ได้จริง

1. แยก Component ให้ขาด: อันนี้เบสิกนะ แต่สำคัญสุดๆ พยายามแยก Component ที่ Fetch Data จาก Server ออกมาเป็น Server Component ต่างหาก แล้วค่อยส่ง Props ลงไปให้ Client Component ที่ต้อง Interact กับ User

// Server Component (fetch data)
async function ProductList() {
  const products = await fetchProducts();
  return ;
}

// Client Component (interactive UI)
'use client'
function ProductTable({ products }) {
  // ... logic for sorting, filtering, etc.
  return (
    
      {/* ... table content ... */}
    
  );
}

2. Streaming & Suspense: ใช้ให้เป็นประโยชน์! อย่ารอให้ Server Render ทุกอย่างเสร็จก่อน ค่อยส่งไป Client ใช้ Suspense ห่อ Component ที่อาจจะ Render ช้า แล้วแสดง Loading State ไปก่อน

import { Suspense } from 'react';

function ProductPage() {
  return (
    <Suspense fallback={<p>Loading products...</p>}>
      <ProductList />
    </Suspense>
  );
}

3. Caching Data: Server Component เนี่ย มันมีกลไก Cache ในตัวอยู่แล้ว ใช้ให้คุ้มค่า! ถ้า Data ชุดเดิมๆ ไม่จำเป็นต้อง Fetch ใหม่ทุกครั้ง React จะ Cache ให้เอง

4. Optimize Data Fetching: เลือกใช้ Library ที่เหมาะสมในการ Fetch Data เช่น swr หรือ react-query พวกนี้มันมี Feature ดีๆ เพียบ เช่น Caching, Revalidation, Error Handling

FAQ คำถามที่พบบ่อย

Server Component เหมาะกับ Data ที่เปลี่ยนแปลงบ่อยแค่ไหน?

ถ้า Data เปลี่ยนแปลงบ่อยมากกก (เช่น Real-time Data) อาจจะไม่เหมาะเท่าไหร่ Server Component เหมาะกับ Data ที่ค่อนข้าง Static หรือเปลี่ยนแปลงไม่บ่อยนัก เช่น Product Catalog, Article Content

ทำไมต้องใช้ 'use client' ใน Client Component?

เพราะ React จะได้รู้ไงน้อง ว่า Component นี้ต้อง Render บน Client นะ ถ้าไม่ใส่ React จะพยายาม Render ทุกอย่างบน Server ก่อน ซึ่งอาจจะไม่ใช่สิ่งที่เราต้องการเสมอไป

Server Component Access Browser API ได้ไหม?

ไม่ได้เด็ดขาด! Server Component รันบน Server มันจะไป Access window หรือ localStorage ได้ยังไงล่ะ? ถ้าจำเป็นต้องใช้ Browser API ให้ย้าย Logic ไปไว้ใน Client Component แทน

Client Component Render บน Server ได้ไหม?

Render ได้ แต่ต้องทำ Hydration ด้วย คือ Server จะ Render HTML มาให้ก่อน แล้ว Client ค่อยเอา HTML นั้นมา "Hydrate" (ทำให้มัน Interactive) อีกที

สรุป

React Server Components นี่แหละ คืออนาคต! (ผมพูดจริงๆ นะ) มันช่วยให้เราสร้างแอปฯ ที่ Performance ดีขึ้น, โหลดเร็วขึ้น, และ Code Clean ขึ้นได้เยอะมาก ลองเอาไปปรับใช้กับ Project ของน้องๆ ดู แล้วจะรู้ว่ามัน Work จริงๆ

อย่าลืมไปอ่าน Blog เพิ่มเติมที่ SiamCafe Blog นะ ผมเขียนบทความ IT ไว้เยอะแยะเลย เผื่อจะเป็นประโยชน์

และถ้าใครสนใจเรื่อง Forex ลองแวะไปดูที่ iCafeForex ได้นะ