Next.js สำหรับมือใหม่: เข้าใจ SSR, SSG และ ISR ให้เลือกใช้ได้ถูก

หลายคนเริ่มต้นจาก React แล้วพออยากพัฒนาเว็บให้เร็วขึ้น รองรับ SEO ดีขึ้น และดูเป็นงานระดับมืออาชีพมากขึ้น ก็มักจะได้ยินชื่อ Next.js อยู่บ่อยๆ เหตุผลสำคัญคือ Next.js ไม่ได้เป็นแค่เฟรมเวิร์กที่ต่อยอดจาก React เท่านั้น แต่ยังช่วยให้เราเลือกวิธีเรนเดอร์หน้าเว็บได้เหมาะกับลักษณะของข้อมูลและเป้าหมายของแต่ละหน้าอีกด้วย

หนึ่งในจุดเด่นที่สุดของ Next.js คือการรองรับการเรนเดอร์หลายรูปแบบ โดย 3 แนวคิดสำคัญที่มือใหม่ควรรู้จัก ได้แก่ SSR, SSG และ ISR ซึ่งแต่ละแบบมีข้อดีต่างกัน และเหมาะกับงานคนละประเภท

ทำไม Next.js ถึงน่าสนใจกว่า React แบบ SPA อย่างเดียว

ถ้าเราใช้ React แบบ Single Page Application หรือ SPA เพียงอย่างเดียว หน้าเว็บจำนวนมากจะต้องรัน JavaScript ก่อนจึงจะแสดงผลข้อมูลได้ครบ ทำให้บางครั้งเกิดปัญหา เช่น

• หน้าเว็บโหลดช้าสำหรับผู้ใช้บางกลุ่ม
• SEO ทำได้ไม่เต็มประสิทธิภาพ
• ต้องจัดการประสิทธิภาพของแต่ละหน้าด้วยตัวเองมากขึ้น

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

1) SSR คืออะไร

SSR หรือ Server-side Rendering คือการให้เซิร์ฟเวอร์สร้างหน้า HTML ใหม่ทุกครั้งเมื่อมีผู้ใช้เข้ามาที่หน้าเว็บ จากนั้นจึงส่งผลลัพธ์ที่เรนเดอร์เสร็จแล้วกลับไปยังเบราว์เซอร์

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

ใน Next.js เรามักใช้ getServerSideProps เพื่อดึงข้อมูลล่าสุดก่อนสร้างเพจ

เหมาะกับงานแบบไหน

• Dashboard
• Feed ข่าว
• หน้าโปรไฟล์
• หน้าที่ข้อมูลเปลี่ยนบ่อยและต้องอัปเดตตลอดเวลา

ตัวอย่างแนวคิด

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

2) SSG คืออะไร

SSG หรือ Static Site Generation คือการสร้างไฟล์ HTML เอาไว้ล่วงหน้าตั้งแต่ตอน build โปรเจกต์ พอมีคนเข้าเว็บก็สามารถเสิร์ฟไฟล์ที่เตรียมไว้ได้ทันที ทำให้หน้าเว็บโหลดได้เร็วมาก

ใน Next.js เราใช้ getStaticProps เพื่อดึงข้อมูลครั้งเดียวในช่วง build แล้วนำไปสร้างเป็นหน้าเว็บแบบ static

เหมาะกับงานแบบไหน

• หน้า About
• Landing Page
• บทความหรือบล็อกที่ไม่อัปเดตบ่อย
• หน้าเนื้อหาคงที่ที่เน้นความเร็วสูงสุด

จุดเด่นของ SSG

• เร็วมากเพราะไฟล์ถูกสร้างไว้แล้ว
• ลดภาระฝั่งเซิร์ฟเวอร์
• เหมาะกับเว็บที่เนื้อหาไม่เปลี่ยนบ่อย

อย่างไรก็ตาม หากข้อมูลเปลี่ยนบ่อย SSG อาจไม่ตอบโจทย์ เพราะต้อง build ใหม่จึงจะอัปเดตเนื้อหาได้

3) ISR คืออะไร

ISR หรือ Incremental Static Regeneration เป็นแนวทางที่ผสมข้อดีของ SSG และ SSR เข้าด้วยกัน กล่าวคือ หน้าเว็บยังคงถูกสร้างเป็น static ล่วงหน้าเพื่อให้โหลดเร็ว แต่สามารถตั้งเวลาให้ระบบสร้างไฟล์ใหม่อัตโนมัติได้เป็นช่วงๆ

ใน Next.js เราใช้ getStaticProps เช่นเดียวกับ SSG แต่เพิ่มค่า revalidate เพื่อกำหนดช่วงเวลาในการอัปเดต เช่น revalidate: 600 หมายถึงให้รีเจนหน้าใหม่ทุก 10 นาที

เหมาะกับงานแบบไหน

• หน้าโปรโมชั่น
• ข่าวหรือประกาศที่อัปเดตเป็นระยะ
• หน้าเนื้อหาที่อยากให้เร็วแบบ static แต่ไม่จำเป็นต้องสดทุกวินาที

จุดเด่นของ ISR

• ได้ความเร็วใกล้เคียง SSG
• ข้อมูลอัปเดตได้อัตโนมัติโดยไม่ต้อง build ใหม่ทั้งโปรเจกต์
• เหมาะกับงานที่ต้องบาลานซ์ระหว่างความเร็วและความสดของข้อมูล

เลือกใช้ SSR, SSG และ ISR อย่างไรดี

การเลือกใช้ไม่จำเป็นต้องยึดทั้งโปรเจกต์ไว้กับวิธีเดียว จุดแข็งของ Next.js คือเราสามารถ mix & match วิธีเรนเดอร์ให้เหมาะกับแต่ละหน้าได้

ตัวอย่างเช่น

• ใช้ SSR กับหน้า dashboard ที่ข้อมูลต้องสดตลอด
• ใช้ SSG กับหน้าแนะนำบริษัทหรือหน้าแคมเปญที่แทบไม่เปลี่ยน
• ใช้ ISR กับหน้าข่าวหรือโปรโมชั่นที่อัปเดตเป็นรอบๆ

แนวคิดสำคัญคือให้ดูธรรมชาติของข้อมูลในแต่ละหน้า แล้วเลือกวิธีที่เหมาะที่สุด แทนที่จะใช้รูปแบบเดียวครอบทุกอย่าง

มือใหม่ควรเริ่มฝึกอย่างไร

ถ้าเพิ่งเริ่มต้น วิธีที่ดีที่สุดคือทดลองทำโปรเจกต์เล็กๆ ด้วย Next.js แล้วสร้างหน้าที่เปรียบเทียบทั้ง 3 แบบด้วยตัวเอง เช่น

• หน้าแรกใช้ SSG
• หน้าข่าวใช้ ISR
• หน้า dashboard จำลองใช้ SSR

เมื่อได้ลองจริง จะเห็นความต่างทั้งเรื่องความเร็ว การอัปเดตข้อมูล และประสบการณ์ในการพัฒนาได้ชัดเจนมากขึ้น

สรุป

Next.js เป็นก้าวต่อไปที่น่าสนใจสำหรับคนที่เริ่มจาก React และอยากพัฒนาเว็บให้มีประสิทธิภาพมากขึ้น โดยเฉพาะในด้านความเร็วและ SEO

หัวใจสำคัญคือการเข้าใจความแตกต่างของ SSR, SSG และ ISR

• SSR เหมาะกับข้อมูลที่ต้องสดใหม่ทุกครั้ง
• SSG เหมาะกับหน้าคงที่ที่ต้องการความเร็วสูง
• ISR เหมาะกับหน้าที่ต้องการทั้งความเร็วและการอัปเดตเป็นช่วงๆ

ถ้าเลือกใช้ให้ถูกกับลักษณะของแต่ละหน้า เราจะได้ทั้งเว็บที่เร็ว ดูแลง่าย และตอบโจทย์ผู้ใช้มากขึ้นในระยะยาว

แหล่งอ้างอิง

• https://api.example.com/data