ถ้าพูดถึงการโหลดข้อมูลแบบเรียลไทม์ และต้องการให้เซิร์ฟเวอร์เป็นคนจัดการข้อมูลทุกครั้งที่มีการรีเควสต์ หน้าเว็บของคุณต้องใช้ 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 คือทางเลือกที่ใช่! 🚀
ไม่มีความคิดเห็น:
แสดงความคิดเห็น