คุณสมบัติ | getStaticProps | getStaticPaths | getServerSideProps | Incremental Static Regeneration (ISR) | Client-side Fetching |
---|---|---|---|---|---|
การเรนเดอร์ | สร้าง HTML ของหน้าเว็บล่วงหน้าในช่วงการสร้างเว็บไซต์ | ใช้ร่วมกับ getStaticProps เพื่อกำหนดเส้นทางที่ต้องการสร้าง | สร้าง HTML ของหน้าเว็บในขณะที่มีการร้องขอจากลูกค้า | อัปเดตหน้าเว็บที่สร้างไว้ล่วงหน้าโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลง | ดึงข้อมูลจาก API หลังจากหน้าเว็บโหลดเสร็จแล้ว |
การดึงข้อมูล | ดึงข้อมูลในช่วงการสร้างเว็บไซต์ล่วงหน้า | กำหนดเส้นทางที่ต้องการสร้างเมื่อใช้ getStaticProps | ดึงข้อมูลในขณะที่มีการร้องขอจากลูกค้า | อัปเดตข้อมูลที่สร้างไว้ล่วงหน้าโดยไม่ต้องรีสร้างทั้งหมด | ดึงข้อมูลจาก API บนฝั่งลูกค้า |
เวลาโหลดครั้งแรก | เร็ว เพราะข้อมูลถูกสร้างไว้ล่วงหน้า | เร็ว เพราะสร้างหน้าเว็บล่วงหน้า | อาจช้ากว่า เนื่องจากต้องสร้าง HTML ใหม่ในแต่ละคำขอ | เร็วขึ้นหลังจากการอัปเดตเป็นระยะ ๆ | อาจช้ากว่า เนื่องจากต้องดึงข้อมูลหลังจากหน้าเว็บโหลด |
ประสิทธิภาพ SEO | ดี เนื่องจาก HTML ถูกสร้างล่วงหน้า | ดี เช่นกัน เพราะสร้างหน้าเว็บล่วงหน้า | ดี แต่การเรนเดอร์อาจช้ากว่าเมื่อมีการร้องขอ | ดี เพราะหน้าเว็บได้รับการสร้างล่วงหน้าและอัปเดตตามต้องการ | ขึ้นอยู่กับการโหลดข้อมูลในขณะที่หน้าเว็บโหลด |
การจัดการการเปลี่ยนแปลงข้อมูล | ไม่มีการอัปเดตข้อมูลโดยอัตโนมัติ | ไม่มีการอัปเดตข้อมูลโดยอัตโนมัติ | ข้อมูลอัปเดตตามคำขอ | อัปเดตข้อมูลตามความถี่ที่กำหนด | อัปเดตข้อมูลได้ตลอดเวลาตามการร้องขอจาก API |
การใช้งาน | เหมาะสำหรับเนื้อหาที่ไม่เปลี่ยนแปลงบ่อย | ใช้เพื่อสร้างหน้าเว็บแบบหลายหน้า | เหมาะสำหรับเนื้อหาที่เปลี่ยนแปลงบ่อย | เหมาะสำหรับเนื้อหาที่ต้องการอัปเดตตามระยะเวลา | เหมาะสำหรับเนื้อหาที่ต้องการการอัปเดตแบบเรียลไทม์ |