ถ้าพูดถึงการสร้างเว็บที่โหลดไว ประหยัดทรัพยากรเซิร์ฟเวอร์ และเหมาะกับ SEO สุด ๆ ก็คงหนีไม่พ้น Static Site Generation (SSG) โดยเฉพาะใน Next.js ที่มีฟีเจอร์เด็ดอย่าง getStaticProps มาช่วยดึงข้อมูลตอน Build Time ทำให้เว็บของเรากลายเป็นไฟล์ HTML ที่พร้อมเสิร์ฟทันที!
วันนี้เราจะมาเจาะลึกว่า getStaticProps ทำงานยังไง ใช้ยังไง และเมื่อไหร่ควรใช้ พร้อมทั้งแชร์ทริคเด็ด ๆ ที่จะช่วยให้คุณใช้งานมันได้อย่างมือโปร! 🚀
📌 Static Site Generation (SSG) คืออะไร?
Static Site Generation (SSG) คือเทคนิคที่เราสร้างหน้าเว็บเป็นไฟล์ HTML ล่วงหน้าตั้งแต่ตอน Build ซึ่งต่างจาก Server-Side Rendering (SSR) ที่ต้องรอให้เซิร์ฟเวอร์รันโค้ดก่อนถึงจะได้ HTML หรือ Client-Side Rendering (CSR) ที่ต้องรอให้เบราว์เซอร์โหลด JavaScript แล้วค่อยแสดงผล
พูดง่าย ๆ คือ SSG ทำให้เว็บของเรากลายเป็นไฟล์ HTML ที่พร้อมเสิร์ฟเลย ซึ่งมีข้อดีหลัก ๆ ดังนี้:
✅ โหลดไวสุด ๆ เพราะเซิร์ฟเวอร์ไม่ต้องประมวลผลเพิ่ม
✅ ลดภาระของเซิร์ฟเวอร์ เพราะทุกอย่างถูก Generate มาตั้งแต่แรก
✅ SEO ดีกว่า เพราะ Bot ของ Google อ่าน HTML ได้ทันที
✅ ใช้งานร่วมกับ CDN ได้ดี ทำให้เสิร์ฟเว็บจากตำแหน่งที่ใกล้ User ที่สุด
แต่ข้อเสียก็มีเหมือนกันนะ:
❌ ใช้ไม่ได้กับข้อมูลที่เปลี่ยนแปลงตลอดเวลา เช่น Dashboard แบบ Real-Time
❌ ถ้ามีเพจเยอะมาก ๆ การ Build อาจใช้เวลานาน
📌 getStaticProps คืออะไร?
getStaticProps เป็นฟังก์ชันของ Next.js ที่ใช้ใน Page Component เพื่อดึงข้อมูลมาตอน Build Time แล้วส่งเป็น Props ให้หน้าเว็บของเรา โดยข้อมูลที่ได้มาจะถูกแปลงเป็น HTML และใช้ซ้ำได้เรื่อย ๆ โดยไม่ต้องโหลดใหม่จากเซิร์ฟเวอร์
👉 เหมาะสำหรับหน้าเว็บที่ ใช้ข้อมูลที่ไม่เปลี่ยนบ่อย เช่น
- บล็อกโพสต์
- หน้า Product Catalog
- หน้า About Us
- รายการบทความ ฯลฯ
📌 วิธีใช้ getStaticProps
ลองมาดูตัวอย่างง่าย ๆ กัน! สมมติว่าเรามี API ที่ให้ข้อมูลเกี่ยวกับโพสต์ และเราอยากดึงมันมาตอน Build Time
export async function getStaticProps() {
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>บล็อกของเรา</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
🔍 อธิบายโค้ด:
- getStaticProps จะถูกเรียกตอนที่เรารัน next build
- เราใช้ fetch ดึงข้อมูลจาก API
- ข้อมูลที่ได้จะถูกส่งไปที่ props ของคอมโพเนนต์ Blog
- หน้าเว็บนี้จะถูก Generate เป็น HTML พร้อมข้อมูลในแต่ละโพสต์
📌 getStaticProps + getStaticPaths = Dynamic Routes!
บางครั้งเราอาจมีหน้าเว็บที่ต้องใช้ Dynamic Routes เช่น /posts/[id] แล้วเราจะให้ Next.js Generate หน้าเหล่านี้เป็น Static ได้ยังไง? ใช้ getStaticPaths ไงล่ะ!
🔥 ตัวอย่างการใช้ getStaticProps + getStaticPaths
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.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>
);
}
🔍 อธิบายโค้ด:
- getStaticPaths ใช้กำหนดว่า Next.js ต้อง Generate หน้าอะไรบ้าง
- fallback: false หมายความว่าถ้าผู้ใช้เข้าไปที่หน้า /posts/9999 ซึ่งไม่มีใน paths จะได้หน้า 404
- getStaticProps รับ params.id แล้วไปดึงข้อมูลจาก API เพื่อส่งให้ Component
📌 revalidate - อัปเดตข้อมูลโดยไม่ต้อง Build ใหม่!
ถ้าข้อมูลของเรามีการเปลี่ยนแปลง เช่น บล็อกโพสต์ที่อัปเดตบ่อย เราสามารถใช้ revalidate เพื่อให้ Next.js รีเฟรชข้อมูลหลังจากเวลาที่กำหนด (Incremental Static Regeneration หรือ ISR)
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 60, // รีเฟรชข้อมูลทุก 60 วินาที
};
}
💡 ข้อดีของ ISR
- ไม่ต้องรอ Build ใหม่เพื่ออัปเดตข้อมูล
- ลดภาระของเซิร์ฟเวอร์ เพราะ Generate เฉพาะหน้าที่มีคนเข้า
📌 ควรใช้ getStaticProps เมื่อไหร่?
✅ ใช้ getStaticProps ถ้า:
- ข้อมูลไม่เปลี่ยนแปลงบ่อย
- ต้องการโหลดหน้าเว็บเร็วและเน้น SEO
- ต้องการเสิร์ฟหน้าเว็บผ่าน CDN
❌ ไม่ควรใช้ getStaticProps ถ้า:
- ข้อมูลเปลี่ยนแปลงแบบเรียลไทม์ (ใช้ Server-Side Rendering หรือ Client-Side Fetching แทน)
- ต้องการแสดงข้อมูลที่ขึ้นอยู่กับผู้ใช้ เช่น หน้าส่วนตัว หรือแดชบอร์ด
📌 สรุป
getStaticProps เป็นเครื่องมือสุดเทพของ Next.js ที่ช่วยให้เราทำ SSG ได้ง่าย ๆ โดย:
- ดึงข้อมูลมาตอน Build Time
- ใช้ร่วมกับ getStaticPaths สำหรับ Dynamic Routes
- ใช้ revalidate เพื่ออัปเดตข้อมูลโดยไม่ต้อง Build ใหม่
ใครที่อยากทำเว็บเร็ว ๆ SEO ดี ๆ ลองใช้ getStaticProps ดู รับรองว่าชีวิตง่ายขึ้นเยอะ! 🚀
ไม่มีความคิดเห็น:
แสดงความคิดเห็น