0Pricing
Frontend Academy · บทเรียน

คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์

ทำความเข้าใจ React Server Components ว่าเมื่อใดควรเพิ่มคำสั่ง 'use client' และวิธีผสม HTML ที่เรนเดอร์บนเซิร์ฟเวอร์กับส่วนย่อยแบบโต้ตอบบนไคลเอนต์

คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

สองโลกในแอปเดียว

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ของ React (RSC) ช่วยให้คุณแบ่งต้นไม้คอมโพเนนต์ระหว่างส่วนที่แสดงผลบนเซิร์ฟเวอร์กับส่วนที่โต้ตอบบนไคลเอนต์ได้ ในตัวจัดการเส้นทางของแอป Next.js คอมโพเนนต์จะเป็นฝั่งเซิร์ฟเวอร์ตามค่าเริ่มต้น หากต้องการใช้ฝั่งไคลเอนต์ ให้เลือกใช้ด้วย 'use client'

หน้าที่ของคอมโพเนนต์ฝั่งเซิร์ฟเวอร์

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ทำงานเฉพาะบนเซิร์ฟเวอร์เท่านั้น โดยสามารถดึงข้อมูลโดยตรง เข้าถึงระบบไฟล์ ใช้ข้อมูลลับที่มีเฉพาะบนเซิร์ฟเวอร์ และแสดงผลเป็น HTML โดยไม่ต้องส่ง React ไปยังไคลเอนต์ แต่ไม่สามารถใช้ฮุก จัดการสถานะ หรือจัดการเหตุการณ์ได้

หน้าที่ของคอมโพเนนต์ฝั่งไคลเอนต์

คอมโพเนนต์ฝั่งไคลเอนต์ทำงานบนเซิร์ฟเวอร์สำหรับ SSR (HTML เริ่มต้น) และทำงานบนไคลเอนต์เพื่อรองรับการโต้ตอบ โดยสามารถใช้ useState, useEffect ตัวจัดการเหตุการณ์ และ API ของเบราว์เซอร์ได้

ค่าเริ่มต้นคือฝั่งเซิร์ฟเวอร์

ในตัวจัดการเส้นทางของแอป Next.js คอมโพเนนต์ทุกตัวเป็นคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ตามค่าเริ่มต้น ซึ่งเหมาะอย่างยิ่ง เพราะแอปส่วนใหญ่ของคุณเป็นการแสดงผลแบบสแตติก

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

เลือกใช้ฝั่งไคลเอนต์

เพิ่ม 'use client' ที่ด้านบนของไฟล์ เพื่อกำหนดให้คอมโพเนนต์ในไฟล์นั้นและสิ่งที่นำเข้ามาเป็นคอมโพเนนต์ฝั่งไคลเอนต์

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

การประกอบฝั่งเซิร์ฟเวอร์และไคลเอนต์

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์สามารถแสดงผลคอมโพเนนต์ฝั่งไคลเอนต์ได้ แต่คอมโพเนนต์ฝั่งไคลเอนต์ไม่สามารถนำเข้าคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ได้ ให้ส่งเนื้อหาที่แสดงผลบนเซิร์ฟเวอร์เป็น children ไปยังตัวครอบฝั่งไคลเอนต์

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

เหตุใดรูปแบบนี้จึงสำคัญ

บันเดิล JS มีขนาดเล็กลง เพราะมีเพียงคอมโพเนนต์ฝั่งไคลเอนต์เท่านั้นที่ถูกส่งไปยังเบราว์เซอร์ เข้าถึงฐานข้อมูลหรือไฟล์ได้โดยตรง จึงไม่จำเป็นต้องมีชั้น API สำหรับข้อมูลที่อ่านอย่างเดียว และได้ SEO ที่ดีขึ้นพร้อม LCP ที่เร็วขึ้น เพราะ HTML มาถึงในสภาพที่แสดงผลเสร็จสมบูรณ์

กฎขอบเขตไคลเอนต์

เมื่อไฟล์หนึ่งถูกระบุด้วย 'use client' คอมโพเนนต์ทั้งหมดในไฟล์นั้นและคอมโพเนนต์ลูกที่นำเข้ามาจะกลายเป็นคอมโพเนนต์ฝั่งไคลเอนต์ 'use client' จึงทำหน้าที่กำหนดขอบเขตระหว่างเซิร์ฟเวอร์กับไคลเอนต์

แอ็กชันฝั่งเซิร์ฟเวอร์

ฟังก์ชันที่ระบุด้วย 'use server' จะทำงานเฉพาะบนเซิร์ฟเวอร์ แต่สามารถเรียกใช้จากคอมโพเนนต์ฝั่งไคลเอนต์ได้ คล้ายกับ RPC มักใช้สำหรับการส่งแบบฟอร์มและการเปลี่ยนแปลงข้อมูล

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

การส่งพร็อพจากเซิร์ฟเวอร์ไปยังไคลเอนต์

พร็อพที่ส่งจากเซิร์ฟเวอร์ไปยังไคลเอนต์ต้องสามารถแปลงเป็น JSON ได้ ห้ามเป็นฟังก์ชัน คลาส หรือ Dates ที่มีโครงสร้างกำหนดเอง ควรแปลงข้อมูลก่อนส่ง

การแยกประเภทของแต่ละแบบ

ให้ดูการนำเข้า: useState, useEffect และตัวจัดการ onClick ทำให้คอมโพเนนต์ต้องเป็นคอมโพเนนต์ฝั่งไคลเอนต์ ส่วนการแสดงข้อมูลล้วน ๆ สามารถอยู่ฝั่งเซิร์ฟเวอร์ได้

ข้อได้เปรียบด้านประสิทธิภาพ

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ช่วยลดขนาดบันเดิล JS ได้อย่างมาก หน้าเว็บที่มีเนื้อหาแบบสแตติกเป็นส่วนใหญ่และมีวิดเจ็ตโต้ตอบเพียงไม่กี่รายการ จะส่ง JS เฉพาะส่วนที่โต้ตอบได้เท่านั้น ซึ่งบางครั้งมีขนาดเล็กลงถึง 90%

ตรวจสอบความเข้าใจ

ฮุกของ React ใดที่ไม่อนุญาตให้ใช้ในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ของ Next.js

ทบทวน: ฝั่งเซิร์ฟเวอร์เทียบกับฝั่งไคลเอนต์

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์: ทำงานเฉพาะบนเซิร์ฟเวอร์ ใช้ async/await ได้ แต่ไม่มีฮุก สถานะ หรือตัวจัดการเหตุการณ์ และช่วยให้บันเดิลมีขนาดเล็กลง คอมโพเนนต์ฝั่งไคลเอนต์: เลือกใช้ด้วย 'use client' และรองรับการโต้ตอบด้วย useState/useEffect/เหตุการณ์ เซิร์ฟเวอร์สามารถแสดงผลไคลเอนต์ได้ แต่ไคลเอนต์ไม่สามารถนำเข้าเซิร์ฟเวอร์ได้ (แต่รับเป็น children ได้) แอ็กชันฝั่งเซิร์ฟเวอร์ ('use server') ใช้สำหรับการเปลี่ยนแปลงข้อมูลในรูปแบบ RPC

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

บทเรียน “คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์”

ทำความเข้าใจ React Server Components ว่าเมื่อใดควรเพิ่มคำสั่ง 'use client' และวิธีผสม HTML ที่เรนเดอร์บนเซิร์ฟเวอร์กับส่วนย่อยแบบโต้ตอบบนไคลเอนต์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Pages Router เทียบกับ App Router
  2. คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์
  3. SSG, SSR และ ISR
  4. เส้นทาง API และมิดเดิลแวร์ของ Next.js
← กลับไปที่ Frontend Academy