เว็บโหลดช้า? SEO ไม่มา? SSR อาจคือคำตอบครับ! 🚀

เคยสงสัยไหมครับว่า ทำไมเวลาเราแชร์ลิงก์บางเว็บลง LINE หรือ Facebook แล้วมันมีรูปพรีวิวสวยๆ แต่บางเว็บกลับขึ้นแต่ลิงก์เปล่าๆ? หรือทำไมบางเว็บเปิดมาแล้วเห็นข้อมูลทันที แต่บางเว็บต้องรอตัวโหลดหมุนๆ อยู่นาน?

คำตอบส่วนใหญ่อยู่ที่เทคนิคการส่งข้อมูลครับ และพระเอกของเราในวันนี้คือ Server-Side Rendering (SSR)

---

🧐 SSR คืออะไรกันแน่?

สรุปสั้นๆ คือ "การวาดหน้าเว็บให้เสร็จตั้งแต่อยู่บน Server" ครับ

ลองจินตนาการว่าคุณสั่งก๋วยเตี๋ยว:

• CSR (Client-Side Rendering): ร้านส่งเส้นดิบ ลูกชิ้น ผัก และน้ำซุปแยกถุงมาให้คุณ แล้วคุณต้องมาลวกเส้น ใส่ชาม จัดจานเองที่โต๊ะ (เบราว์เซอร์รับแรงกระแทกในการ Render)
• SSR (Server-Side Rendering): ร้านลวกเส้น จัดชาม ใส่ทุกอย่างมาให้เสร็จสับ คุณแค่รับมาแล้วยกซดได้เลย! (Server จัดการให้เสร็จ เบราว์เซอร์แค่แสดงผล)

---

✅ ทำไมเราถึงต้องใช้ SSR?

1. SEO เป็นเลิศ: เนื่องจาก Server ส่ง HTML ที่มีเนื้อหาครบถ้วนไปให้ ทำให้ Google Bot สามารถเข้ามาเก็บข้อมูล (Index) ได้ทันที ต่างจาก CSR ที่ Bot อาจจะเห็นแค่หน้าว่างๆ เพราะรอ JavaScript ทำงานไม่ไหว
2. First Contentful Paint (FCP) รวดเร็ว: ผู้ใช้จะเห็นเนื้อหาบนหน้าจอเร็วกว่า เพราะไม่ต้องรอดาวน์โหลดและรัน JavaScript ชุดใหญ่ก่อนถึงจะเห็นข้อมูล
3. เรื่อง Social Share: รูปภาพและคำอธิบาย (Meta Tags) จะทำงานได้ถูกต้อง 100% เพราะข้อมูลถูกฝังมาใน HTML ตั้งแต่ต้น

---

🛠 SSR ในโลกของ Next.js (App Router)

ใน Next.js เวอร์ชั่นใหม่ๆ การทำ SSR นั้นเป็นเรื่องปกติมากครับ เพราะโดยพื้นฐานแล้ว Page ทุกหน้าใน App Router จะเป็น Server Components อยู่แล้ว

ตัวอย่างการทำ SSR เพื่อดึงข้อมูลจาก API:

// src/app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'no-store', // บังคับให้เป็น SSR ดึงข้อมูลใหม่ทุกครั้ง
  });
  return res.json();
}

export default async function Page() {
  const data = await getPosts();

  return (
    <main>
      <h1>บทความล่าสุด</h1>
      <ul>
        {data.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

---

⚖️ แล้ว SSR มีข้อเสียไหม?

แน่นอนว่าไม่มีอะไรสมบูรณ์แบบครับ:

• ภาระของ Server: Server ต้องทำงานหนักขึ้น เพราะต้อง Render หน้าเว็บทุกครั้งที่มีคนขอเข้ามา (Request)
• Time to First Byte (TTFB): อาจจะช้ากว่า Static Site นิดหน่อย เพราะ Server ต้องใช้เวลาเตรียมความพร้อมก่อนส่งข้อมูล
• ความซับซ้อน: การจัดการ State หรือการใช้ Browser API (เช่น window หรือ localStorage) ในชั้น SSR จะทำไม่ได้ตรงๆ ต้องระวังเรื่องนี้ด้วยครับ

---

✨ สรุป

SSR ไม่ใช่เทคโนโลยีใหม่ แต่มันถูกนำมาปัดฝุ่นและปรับปรุงให้ดีขึ้นใน Framework ยุคใหม่อย่าง Next.js เพื่อตอบโจทย์เรื่องความเร็วและความเป็นมิตรกับ Search Engine

ถ้าคุณกำลังทำเว็บที่ต้องการให้คนค้นหาเจอ หรือเว็บที่มีเนื้อหาเปลี่ยนแปลงบ่อย SSR คือทางเลือกที่คุณ "พลาดไม่ได้" ครับ!

หวังว่าบทความนี้จะช่วยให้เพื่อนๆ เข้าใจ SSR มากขึ้นนะครับ ไว้เจอกันใหม่บทความหน้าครับ! 🦆✨