React Component

Component Type

React Client Components และ React Server Components เป็นแนวทางในการจัดการกับการเรนเดอร์ใน React ซึ่งช่วยให้สามารถจัดการข้อมูลและการเรนเดอร์ได้อย่างมีประสิทธิภาพมากขึ้น

React Client Components

คอมโพเนนต์ที่ทำงานบนฝั่งลูกค้า (Client-Side) ซึ่งหมายความว่าคอมโพเนนต์เหล่านี้จะถูกเรนเดอร์ในเบราว์เซอร์ของผู้ใช้ และสามารถใช้ state, event handlers และอื่น ๆ

• ใช้ Hooks: สามารถใช้ hooks เช่น useState, useEffect ฯลฯ
• การจัดการสถานะ: การจัดการสถานะ (state) และการจัดการอีเวนต์
• การเรนเดอร์ฝั่งลูกค้า: ทุกการเปลี่ยนแปลงจะถูกเรนเดอร์ในเบราว์เซอร์

import React, { useState } from 'react';

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

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

export default Counter;

React Server Components

คอมโพเนนต์ที่ทำงานบนฝั่งเซิร์ฟเวอร์ (Server-Side) ซึ่งหมายความว่าคอมโพเนนต์เหล่านี้จะถูกเรนเดอร์บนเซิร์ฟเวอร์และส่งผลลัพธ์ที่เรนเดอร์แล้วไปยังเบราว์เซอร์ ทำให้ลดการทำงานที่เบราว์เซอร์ต้องทำ

• ไม่ใช้ Hooks: ไม่สามารถใช้ hooks ที่เกี่ยวข้องกับการจัดการสถานะหรืออีเวนต์ได้
• การเรนเดอร์ฝั่งเซิร์ฟเวอร์: ช่วยลดเวลาการโหลดหน้าเว็บและสามารถรวมข้อมูลจากหลายแหล่งได้
• การบูรณาการกับฐานข้อมูล: การดึงข้อมูลจากฐานข้อมูลจะเกิดขึ้นที่ฝั่งเซิร์ฟเวอร์

// This is a React Server Component (in Next.js, for example)
import React from 'react';

// Note: You do not use hooks like useState here
async function fetchData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function DataFetcher() {
  const data = await fetchData();

  return <div>Data: {data}</div>;
}