แนะนำการ Server-side Rendering ด้วย Next.js และ Edge Runtime บน Cloudflare Pages

ทำไมต้องใช้ SSR บน Edge

การทำ server-side rendering (SSR) ด้วย Next.js ร่วมกับ Edge Runtime ของ Cloudflare ช่วยเพิ่มประสิทธิภาพของเว็บไซต์เราได้ดังนี้:

• เรนเดอร์หน้าเว็บได้ใกล้ผู้ใช้มากขึ้นด้วย Edge Network ทำให้ลดเวลาโหลดหน้าเพจลง
  Edge Network หมายถึงเครือข่ายเซิร์ฟเวอร์ที่กระจายอยู่ทั่วโลก เช่น Cloudflare ที่มีจุดเชื่อมต่อ (PoP) กว่า 300 แห่งทั่วโลก ณ ปี 2025 เมื่อหน้าเว็บถูกเรนเดอร์ที่ Edge Node ใกล้ผู้ใช้ เช่น ในกรุงเทพฯ หรือสิงคโปร์ แทน Origin Server ที่อาจอยู่ไกลอย่างสหรัฐฯ ความหน่วง (Latency) จะลดลง ส่งผลให้ Time to First Byte (TTFB) เร็วขึ้น ซึ่งเป็นปัจจัยสำคัญที่ทำให้ผู้ใช้สัมผัสประสบการณ์โหลดหน้าเว็บได้ไว
• ช่วยให้ SEO ดีขึ้น เนื่องจากเนื้อหาเต็มรูปแบบถูกส่งกลับมาจาก server ทำให้ search engine เห็นข้อมูลได้ง่ายขึ้น
  SSR สร้าง HTML ที่สมบูรณ์จากฝั่งเซิร์ฟเวอร์ก่อนส่งไปยังเบราว์เซอร์ ต่างจาก Client-Side Rendering (CSR) ที่ต้องรอ JavaScript รัน Search Engine Bots เช่น Googlebot จึงอ่านเนื้อหาได้ทันทีโดยไม่ต้องรอการประมวลผลเพิ่มเติม แถมการเรนเดอร์ที่ Edge ยังช่วยให้หน้าเว็บโหลดเร็ว ซึ่ง Google ใช้ Page Speed เป็นหนึ่งในปัจจัยจัดอันดับด้วย
• ทำงานร่วมกับ Next.js ได้อย่างลงตัว ทำให้มีความยืดหยุ่นในการพัฒนาสูง
  Next.js รองรับ Edge Runtime ซึ่งเป็นสภาพแวดล้อมน้ำหนักเบาที่ออกแบบให้รันโค้ดใกล้ผู้ใช้ ช่วยให้ใช้ API Routes หรือ Middleware เพื่อปรับแต่งหน้าเว็บแบบไดนามิกตามข้อมูลผู้ใช้ เช่น ภาษาหรือตำแหน่งที่ตั้งได้ง่าย ๆ และเมื่อใช้กับ Cloudflare Pages การ Scaling และ Deployment จะถูกจัดการอัตโนมัติ ลดความซับซ้อนในการพัฒนา

ในบทความนี้เราจะมาเรียนรู้กันว่าทำ SSR ด้วย Next.js และ Edge Runtime บน Cloudflare Pages ได้อย่างไรบ้าง โดยมีขั้นตอนคร่าว ๆ ดังนี้:

1. ตั้งค่าโปรเจกต์ Next.js: ใช้ฟีเจอร์ SSR เช่น getServerSideProps ในหน้าที่ต้องการเรนเดอร์ฝั่งเซิร์ฟเวอร์
2. ปรับให้เข้ากับ Edge: ระบุ runtime: 'edge' ใน API Routes หรือ Middleware เพื่อให้รันบน Edge Network
3. เชื่อมต่อ Cloudflare Pages: ลิงก์โปรเจกต์กับ GitHub, ตั้งค่า Build Command เป็น next build, และ Deploy เพื่อให้ Cloudflare จัดการรันโค้ดบน Edge อัตโนมัติ

อย่างไรก็ตาม Edge Runtime มีข้อจำกัด เช่น ไม่เหมาะกับงานที่ใช้ CPU สูงหรือโมดูล Node.js บางตัวที่ไม่รองรับ แต่สำหรับเว็บที่ต้องการความเร็วและ SEO การใช้ SSR บน Edge ถือเป็นทางเลือกที่ทรงพลัง