ความแตกต่างระหว่าง SSR, SSG และ CSR ใน Next.js – อธิบายแบบง่ายๆ

Next.js เป็นเฟรมเวิร์กที่ทำให้การพัฒนาเว็บแอปด้วย React ง่ายและเร็วขึ้น แต่เมื่อพูดถึงการเรนเดอร์หน้าเว็บใน Next.js หลายคนอาจจะงงกับคำว่า SSR (Server-Side Rendering), SSG (Static Site Generation) และ CSR (Client-Side Rendering) ว่าแต่ละตัวต่างกันยังไง และควรเลือกใช้อะไรดี วันนี้เรามาเคลียร์ให้กระจ่าง!

🎭 อะไรคือ SSR, SSG และ CSR?

ถ้าจะเข้าใจง่าย ๆ ให้นึกถึงวิธีที่หน้าเว็บถูกโหลดขึ้นมาบนหน้าจอของผู้ใช้ มันมี 3 วิธีหลัก ๆ คือ

• CSR (Client-Side Rendering) → โหลดหน้าเว็บแบบเปล่า ๆ แล้วให้ JavaScript ไปดึงข้อมูลมาเติมเอง
• SSR (Server-Side Rendering) → โหลดข้อมูลที่ฝั่งเซิร์ฟเวอร์ แล้วส่ง HTML ที่มีข้อมูลมาครบให้ผู้ใช้
• SSG (Static Site Generation) → สร้าง HTML ทั้งหมดตั้งแต่ตอน build และเสิร์ฟแบบ static

มาเจาะลึกแต่ละตัวกัน 🔍

1. CSR (Client-Side Rendering) – โหลดข้อมูลที่ฝั่งผู้ใช้

📌 มันคืออะไร?

CSR (Client-Side Rendering) เป็นแนวทางการโหลดหน้าเว็บแบบดั้งเดิมของ React คือ

• โหลดโครงสร้างหน้าเว็บมาก่อน
• จากนั้นใช้ JavaScript ไปดึงข้อมูลจาก API หรือ Database มาเติมที่ฝั่งผู้ใช้

🏗 ตัวอย่างโค้ด CSR ใน Next.js

import { useEffect, useState } from "react";

export default function CSRPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

✅ ข้อดีของ CSR
✔️ โหลดเร็วถ้าเนื้อหาไม่เยอะ
✔️ ประสบการณ์ใช้งานลื่นไหล (เพราะไม่ต้องรีเฟรชหน้า)
✔️ ใช้งานง่ายมาก


❌ ข้อเสียของ CSR
❌ SEO ไม่ดี เพราะต้องรอให้ข้อมูลโหลดมาก่อน
❌ โหลดข้อมูลช้ากว่า เพราะต้องดึง API เพิ่ม

2. SSR (Server-Side Rendering) – เรนเดอร์บนเซิร์ฟเวอร์

📌 มันคืออะไร?

SSR (Server-Side Rendering) ทำงานตรงข้ามกับ CSR คือ

• เมื่อมีคนเข้าเว็บ Next.js จะไปดึงข้อมูลจากเซิร์ฟเวอร์มาก่อน
• แล้วสร้าง HTML พร้อมข้อมูล ส่งให้ผู้ใช้เลย
• ทำให้หน้าเว็บแสดงผลพร้อมข้อมูลตั้งแต่แรก

🏗 ตัวอย่างโค้ด SSR ใน Next.js

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function SSRPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

✅ ข้อดีของ SSR
✔️ SEO ดีมาก เพราะข้อมูลมาเป็น HTML พร้อมเลย
✔️ ใช้ได้กับเนื้อหาที่เปลี่ยนบ่อย เช่น ข่าว หรือ Dashboard
✔️ ไม่ต้องรอโหลดข้อมูลที่ฝั่งผู้ใช้


❌ ข้อเสียของ SSR
❌ โหลดช้ากว่า SSG เพราะต้องรอให้เซิร์ฟเวอร์ดึงข้อมูลก่อน
❌ ถ้ามีคนเข้าเยอะ อาจทำให้เซิร์ฟเวอร์ช้า

3. SSG (Static Site Generation) – เรนเดอร์ตั้งแต่ตอน build

📌 มันคืออะไร?

SSG (Static Site Generation) เป็นการสร้าง HTML ล่วงหน้าตั้งแต่ตอน build เวลา deploy หน้าเว็บก็จะเป็น ไฟล์ HTML Static ที่พร้อมใช้งาน

🏗 ตัวอย่างโค้ด SSG ใน Next.js

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function SSGPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}


✅ ข้อดีของ SSG
✔️ เร็วมาก เพราะหน้าเว็บถูกสร้างล่วงหน้า
✔️ รองรับ SEO ดีเยี่ยม
✔️ เซิร์ฟเวอร์ไม่ต้องทำงานหนัก


❌ ข้อเสียของ SSG
❌ ใช้กับข้อมูลที่เปลี่ยนแปลงตลอดไม่ได้ เช่น Dashboard หรือ News Feed
❌ ถ้าเปลี่ยนข้อมูล ต้อง build ใหม่

🎯 สรุปว่าเลือกอะไรดี?

วิธี	โหลดเร็วไหม? 🚀	SEO ดีไหม? 🌍	เหมาะกับอะไร?
CSR (Client-Side Rendering)	ปานกลาง	แย่	เว็บที่ไม่เน้น SEO เช่น Dashboard
SSR (Server-Side Rendering)	ช้าแต่ได้ข้อมูลครบ	ดี	เว็บที่มีข้อมูลเปลี่ยนบ่อย เช่น ข่าว
SSG (Static Site Generation)	เร็วที่สุด	ดีมาก	เว็บที่ข้อมูลเปลี่ยนน้อย เช่น บล็อก

✅ แนวทางแนะนำ

• ใช้ CSR ถ้าเน้น UX และไม่แคร์ SEO
• ใช้ SSR ถ้าต้องอัปเดตข้อมูลบ่อย และต้องการ SEO
• ใช้ SSG ถ้าต้องการความเร็วและ SEO ดี

🚀 Hybrid Approach – ใช้หลายแบบร่วมกัน

Next.js ไม่ได้บังคับให้ใช้แค่วิธีเดียว! เราสามารถใช้ SSR, SSG และ CSR ร่วมกันได้ เช่น

• ใช้ SSG สำหรับหน้าเว็บหลัก เช่น หน้า About, หน้า Blog
• ใช้ SSR สำหรับหน้าที่เปลี่ยนข้อมูลบ่อย เช่น หน้า Dashboard
• ใช้ CSR สำหรับฟีเจอร์ที่ไม่เกี่ยวกับ SEO เช่น หน้า Chat หรือ Cart

ตัวอย่างโค้ด Hybrid Approach

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 10, // อัปเดตข้อมูลทุก 10 วินาที
  };
}

🔥 สรุป

• CSR → โหลดที่ฝั่งผู้ใช้ (เร็ว แต่ไม่ดีต่อ SEO)
• SSR → โหลดที่ฝั่งเซิร์ฟเวอร์ (SEO ดี แต่โหลดช้ากว่า)
• SSG → โหลดล่วงหน้าตอน build (เร็วและ SEO ดีมาก)

    Next.js ใช้หลายแบบร่วมกันได้ 🚀