What is Next.js

---

Next.js เป็น React framework ที่ใช้สำหรับพัฒนา web application ที่มีประสิทธิภาพสูง โดยมีคุณสมบัติเด่นหลายประการ เช่น server-side rendering (SSR), static site generation (SSG), automatic code splitting, และ optimized performance ซึ่งช่วยให้นักพัฒนาสามารถสร้าง web application ที่รวดเร็ว ปรับขนาดได้ และเป็นมิตรกับ SEO ได้อย่างง่ายดาย

Server-Side Rendering (SSR)

• SSR เป็นเทคนิคในการ render หน้าเว็บไซต์บน server และส่ง HTML ที่สมบูรณ์ไปยังเบราว์เซอร์ของผู้ใช้

• เมื่อผู้ใช้ร้องขอหน้าเว็บ server จะดึงข้อมูลที่จำเป็น, สร้าง HTML, และส่งกลับไปยังเบราว์เซอร์ ซึ่งจะแสดงผลเนื้อหาได้ทันที

• ประโยชน์ของ SSR คือ ช่วยให้เว็บไซต์โหลดได้เร็วขึ้น, เป็นมิตรกับ SEO (เนื่องจาก search engine สามารถอ่านเนื้อหาได้ง่าย), และเหมาะสำหรับเว็บไซต์ที่ต้องการประสิทธิภาพในการโหลดครั้งแรกที่ดี

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

Static Site Generation (SSG)

• SSG เป็นวิธีการสร้างหน้าเว็บแบบคงที่ (static pages) ในขั้นตอนการ build ซึ่งจะถูกจัดเก็บไว้บน server และส่งไปยังผู้ใช้เมื่อมีการร้องขอ

• ด้วย SSG หน้าเว็บจะถูกสร้างล่วงหน้าและสามารถส่งให้ผู้ใช้ได้อย่างรวดเร็ว โดยไม่ต้องรอให้ server ประมวลผลในแต่ละครั้ง

• SSG เหมาะสำหรับเว็บไซต์ที่มีเนื้อหาคงที่ ไม่มีการเปลี่ยนแปลงบ่อย เช่น บล็อก, เว็บไซต์ข่าว, และเว็บไซต์เอกสาร

• ประโยชน์ของ SSG คือ การโหลดเว็บไซต์ที่รวดเร็ว, ปรับขนาดได้ง่าย (เนื่องจากไม่ต้องพึ่งพา server), และเป็นมิตรกับ SEO

• อย่างไรก็ตาม SSG อาจไม่เหมาะกับเว็บไซต์ที่มีเนื้อหาไดนามิกหรือต้องการ real-time updates

Automatic Code Splitting

• Automatic code splitting เป็นเทคนิคในการแบ่งโค้ด JavaScript ของแอปพลิเคชันออกเป็นส่วนย่อยๆ (chunks) โดยอัตโนมัติ

• ด้วยการแบ่งโค้ดเป็นส่วนย่อย เบราว์เซอร์สามารถโหลดเฉพาะโค้ดที่จำเป็นสำหรับหน้าเว็บปัจจุบัน โดยไม่ต้องโหลดโค้ดทั้งหมดในครั้งเดียว

• ประโยชน์ของ automatic code splitting คือ ทำให้แอปพลิเคชันโหลดได้เร็วขึ้น, ลดการใช้แบนด์วิดท์, และปรับปรุงประสิทธิภาพโดยรวม

• Automatic code splitting มักใช้ควบคู่กับเทคนิค lazy loading ซึ่งจะโหลดโค้ดส่วนย่อยเมื่อจำเป็นเท่านั้น เช่น เมื่อผู้ใช้นำทางไปยังเพจที่เฉพาะเจาะจง

• ใน Next.js, automatic code splitting ถูกรองรับโดยอัตโนมัติ โดยจะแบ่งโค้ดตามโครงสร้างของไฟล์และ routes ของแอปพลิเคชัน