การใช้ getServerSideProps สำหรับ Server-side Rendering (SSR)

ถ้าพูดถึงการโหลดข้อมูลแบบเรียลไทม์ และต้องการให้เซิร์ฟเวอร์เป็นคนจัดการข้อมูลทุกครั้งที่มีการรีเควสต์ หน้าเว็บของคุณต้องใช้ Server-side Rendering (SSR) และหนึ่งในฟีเจอร์เด่นของ Next.js ที่ทำให้ SSR เป็นเรื่องง่ายก็คือ getServerSideProps นั่นเอง!

วันนี้เราจะมาดูกันว่า getServerSideProps ทำงานยังไง ใช้ยังไง และเมื่อไหร่ควรใช้ พร้อมเทคนิคดี ๆ ที่จะช่วยให้คุณใช้งาน SSR ได้อย่างมีประสิทธิภาพสุด ๆ! 🚀

📌 Server-side Rendering (SSR) คืออะไร?

Server-side Rendering (SSR) คือเทคนิคที่ให้เซิร์ฟเวอร์ประมวลผลหน้าเว็บ ทุกครั้งที่มีการรีเควสต์ ซึ่งต่างจาก Static Site Generation (SSG) ที่สร้างหน้า HTML ล่วงหน้าตอน Build Time

🔍 ข้อดีของ SSR:

• ข้อมูลอัปเดตแบบเรียลไทม์ เพราะดึงข้อมูลใหม่ทุกครั้งที่มีการโหลดหน้า
• เหมาะกับหน้าที่ต้องการข้อมูลเฉพาะตัวของผู้ใช้ เช่น Dashboard หรือ Personalized Content
• ไม่ต้องรอ Build ใหม่เวลาข้อมูลเปลี่ยน

❌ ข้อเสียของ SSR:

•     โหลดช้ากว่า SSG เพราะต้องรอให้เซิร์ฟเวอร์ประมวลผลก่อน
•     ใช้ทรัพยากรเซิร์ฟเวอร์มากขึ้น เพราะต้องประมวลผลทุกครั้งที่มีรีเควสต์
•     แคชยากกว่า เพราะข้อมูลเปลี่ยนแปลงตลอด

📌 getServerSideProps คืออะไร?

getServerSideProps เป็นฟังก์ชันพิเศษของ Next.js ที่ใช้ดึงข้อมูลจากเซิร์ฟเวอร์แบบ Real-time ก่อนที่จะแสดงผลให้ผู้ใช้

• เรียกใช้ ทุกครั้งที่มีการโหลดหน้า (ไม่มีการแคช)
• ทำงานเฉพาะฝั่งเซิร์ฟเวอร์เท่านั้น (รันบน Node.js)
• สามารถดึงข้อมูลจาก API, Database, หรือ Authentication ได้

📌 วิธีใช้ getServerSideProps

มาดูตัวอย่างกัน สมมติว่าเราต้องการดึงข้อมูลโพสต์แบบเรียลไทม์จาก API

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

  return {
    props: {
      posts,
    },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>บล็อกของเรา (SSR)</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

🔍 อธิบายโค้ด:

• getServerSideProps จะรัน ทุกครั้งที่ผู้ใช้เข้าเว็บ
• ใช้ fetch ดึงข้อมูลจาก API
• ส่งข้อมูลไปที่ props ของคอมโพเนนต์ Blog
• เมื่อหน้าโหลด ข้อมูลจะถูกดึงแบบ เรียลไทม์ จากเซิร์ฟเวอร์

📌 ส่งพารามิเตอร์ไปที่ getServerSideProps

ถ้าเรามี Dynamic Routes เช่น /posts/[id] แล้วต้องการให้เซิร์ฟเวอร์ดึงข้อมูลตาม id ที่ผู้ใช้เรียก เราสามารถใช้ context.params ได้

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

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

🔍 อธิบายโค้ด:

• context.params.id จะรับค่า id จาก URL
• ดึงข้อมูลเฉพาะโพสต์ที่ตรงกับ id
• ส่งข้อมูลไปที่ Component และแสดงผล

📌 ใช้ context เพื่อเข้าถึง Query String หรือ Headers

นอกจาก params แล้ว context ยังมีค่าที่เป็นประโยชน์อีกเพียบ เช่น

• context.query → ใช้ดึง Query Parameters (?page=2)
• context.req → ใช้ดึง Request Headers หรือ Session
• context.res → ใช้เซ็ต Response Headers

ตัวอย่าง: ดึงค่าจาก Query String

export async function getServerSideProps(context) {
  const page = context.query.page || 1;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}`);
  const posts = await res.json();

  return {
    props: { posts, page },
  };
}

export default function Blog({ posts, page }) {
  return (
    <div>
      <h1>บล็อก - หน้า {page}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ ข้อดี: รองรับการเปลี่ยนหน้า (?page=2) แบบเรียลไทม์!

📌 ควรใช้ getServerSideProps เมื่อไหร่?

✅ ใช้ getServerSideProps ถ้า:

• ข้อมูลต้องอัปเดตแบบเรียลไทม์ (เช่น Dashboard, Stock Price, Weather)
• ข้อมูลขึ้นอยู่กับผู้ใช้ (เช่น หน้า Profile, Authentication)
• ต้องการ Query Parameters (?search=..., ?page=...)

❌ ไม่ควรใช้ getServerSideProps ถ้า:

• ข้อมูลเปลี่ยนแปลงไม่บ่อย → ใช้ getStaticProps ดีกว่า
• ต้องการโหลดเว็บเร็วสุด ๆ → ใช้ getStaticProps + revalidate

📌 เปรียบเทียบ getServerSideProps vs getStaticProps

Feature	getServerSideProps (SSR)	getStaticProps (SSG)
ดึงข้อมูลตอน	ทุกครั้งที่โหลดหน้า	ตอน Build Time เท่านั้น
เหมาะกับข้อมูลที่	เปลี่ยนแปลงบ่อย	คงที่ หรือเปลี่ยนนาน ๆ ที
โหลดเร็วกว่า	❌ ต้องรอเซิร์ฟเวอร์	✅ โหลดไว เพราะเป็น Static
ใช้งานร่วมกับ API	✅ ดึงข้อมูลเรียลไทม์	✅ ดึง API ได้ตอน Build
SEO	✅ ดี	✅ ดีมาก

💡 สรุปง่าย ๆ:

• ถ้าเป็นข้อมูลที่ไม่ค่อยเปลี่ยน ใช้ getStaticProps
• ถ้าเป็นข้อมูลที่เปลี่ยนตลอด ใช้ getServerSideProps

📌 สรุป

getServerSideProps เป็นฟังก์ชันที่ช่วยให้ Next.js ทำ SSR ได้ง่าย ๆ โดย:

• ดึงข้อมูลจากเซิร์ฟเวอร์ ทุกครั้งที่มีการโหลดหน้า
• ใช้ร่วมกับ Dynamic Routes และ Query Parameters ได้
• เหมาะสำหรับข้อมูลที่เปลี่ยนแปลงตลอดเวลา หรือขึ้นอยู่กับผู้ใช้

ถ้าเว็บของคุณต้องการโหลดข้อมูลแบบเรียลไทม์ SSR คือทางเลือกที่ใช่! 🚀

การใช้ Link และ useRouter เพื่อการนำทางใน Next.js

การนำทาง (Navigation) เป็นหนึ่งในองค์ประกอบสำคัญของเว็บแอปพลิเคชัน เพราะมันทำให้ผู้ใช้สามารถเคลื่อนที่ไปมาระหว่างหน้าได้อย่างราบรื่น ใน Next.js ซึ่งเป็น React Framework ที่ได้รับความนิยมสูง เรามีเครื่องมือสองตัวที่ใช้ในการนำทางหลัก ๆ ได้แก่ Link และ useRouter

ในบทความนี้ เราจะมาทำความเข้าใจว่า Link และ useRouter คืออะไร ใช้งานยังไง และมีกรณีไหนบ้างที่ควรใช้ตัวไหน พร้อมตัวอย่างโค้ดที่เข้าใจง่าย

ทำไมต้องใช้ Link และ useRouter?

ใน Next.js เราสามารถใช้ <a href="..."> แบบปกติได้ แต่ปัญหาคือมันจะโหลดหน้าใหม่ทุกครั้งที่คลิกลิงก์ ซึ่งไม่ใช่สิ่งที่เราต้องการสำหรับเว็บแอปที่ต้องการความเร็วและประสิทธิภาพสูง

Link และ useRouter แก้ปัญหานี้ได้อย่างไร?

• Link ช่วยให้เราสามารถทำ client-side navigation ได้โดยที่ไม่ต้องโหลดหน้าใหม่
• useRouter ให้เราควบคุมการนำทางด้วยโค้ด เช่น การเปลี่ยนเส้นทาง (redirect) หรือดึงค่าพารามิเตอร์จาก URL

1. Link – วิธีสร้างลิงก์นำทางแบบง่าย ๆ

ถ้าเราต้องการสร้างลิงก์ระหว่างหน้าต่าง ๆ ใน Next.js วิธีที่ถูกต้องคือใช้ <Link> จาก next/link

ตัวอย่างการใช้งานพื้นฐาน

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>หน้าแรก</h1>
      <Link href="/about">ไปที่หน้า About</Link>
    </div>
  );
}

✅ ทำไมต้องใช้ Link แทน <a>?

• เมื่อใช้ Link Next.js จะ โหลดหน้าใหม่ให้เร็วขึ้น เพราะมันใช้เทคนิคการ prefetch (โหลดล่วงหน้า)
• ไม่ต้องโหลด HTML ใหม่ทั้งหน้า เหมือนกับ Single Page Application (SPA)
• การใช้งานง่าย ไม่ต้องเขียนโค้ด JavaScript เพิ่ม

2. useRouter – การควบคุมเส้นทางด้วย JavaScript

ในบางกรณี เราอาจต้องนำทางโดยไม่ใช้ <Link> เช่น การเปลี่ยนหน้าเมื่อผู้ใช้กดปุ่ม หรือเปลี่ยนเส้นทางหลังจากทำบางอย่างเสร็จ (redirect)

Next.js มี useRouter จาก next/router ที่ช่วยให้เราควบคุมเส้นทางได้ผ่านโค้ด JavaScript

ตัวอย่างการใช้งาน useRouter เพื่อเปลี่ยนหน้า

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const goToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>หน้าแรก</h1>
      <button onClick={goToAbout}>ไปที่หน้า About</button>
    </div>
  );
}

✅ router.push(url) ทำอะไรได้บ้าง?

• เปลี่ยนเส้นทางโดยไม่ต้องใช้ <Link>
• ทำให้การเปลี่ยนหน้าเกิดขึ้นจากอีเวนต์ เช่น คลิกปุ่ม หรือส่งฟอร์ม
• รองรับการใช้พารามิเตอร์ใน URL

3. ส่งค่าผ่าน URL ด้วย Query Parameters

ในบางกรณี เราอาจต้องส่งข้อมูลไปพร้อมกับ URL เช่น /profile?user=JohnDoe

วิธีส่งค่าไปยังหน้าอื่น

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const goToProfile = () => {
    router.push({
      pathname: '/profile',
      query: { user: 'JohnDoe' },
    });
  };

  return (
    <div>
      <h1>หน้าแรก</h1>
      <button onClick={goToProfile}>ไปที่โปรไฟล์ของ John Doe</button>
    </div>
  );
}

4. ดึงค่าพารามิเตอร์จาก URL

เมื่อเราส่งค่าไปกับ URL แล้ว เราก็ต้องดึงค่ามาใช้ที่หน้าปลายทาง

วิธีดึงค่าจาก query parameters

import { useRouter } from 'next/router';

export default function Profile() {
  const router = useRouter();
  const { user } = router.query; // ดึงค่าพารามิเตอร์จาก URL

  return (
    <div>
      <h1>โปรไฟล์ของ {user || 'ไม่ทราบชื่อ'}</h1>
    </div>
  );
}

✅ จุดที่ต้องระวัง

• ค่า router.query อาจเป็น undefined ถ้าหน้าโหลดครั้งแรก ต้องเช็กก่อนใช้

5. นำทางแบบ Dynamic Routing

ถ้าเรามีเส้นทางแบบไดนามิก เช่น /blog/[id] และอยากเปลี่ยนหน้าไปที่ /blog/123 เราสามารถใช้ router.push() ได้แบบนี้

ตัวอย่าง Dynamic Routing

import { useRouter } from 'next/router';

export default function BlogList() {
  const router = useRouter();

  const goToBlog = (id) => {
    router.push(`/blog/${id}`);
  };

  return (
    <div>
      <h1>รายการบทความ</h1>
      <button onClick={() => goToBlog(123)}>อ่านบทความ 123</button>
    </div>
  );
}

ที่หน้า /blog/[id].js เราสามารถดึงค่า id จาก URL ได้แบบนี้

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>บทความที่ {id}</h1>;
}

Link กับ useRouter ควรใช้เมื่อไหร่?

กรณี                                                ใช้ Link    ใช้ useRouter
ลิงก์ระหว่างหน้า                                    ✅              ❌
นำทางจากปุ่มหรืออีเวนต์                      ❌              ✅
ส่งค่าไปกับ URL                                   ❌              ✅
Redirect หลังทำบางอย่างเสร็จ             ❌              ✅
ต้องการโหลดล่วงหน้า (prefetch)          ✅             ❌

สรุป

• Link ใช้สำหรับการนำทางแบบปกติที่ต้องการให้ Next.js จัดการ prefetch ให้
• useRouter ใช้เมื่อต้องการนำทางด้วยโค้ด JavaScript เช่น การ redirect หรือดึงค่าจาก URL
• Next.js ช่วยให้การนำทางรวดเร็วและมีประสิทธิภาพกว่าการใช้ <a> แบบดั้งเดิม

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการนำทางใน Next.js มากขึ้น!