การดึงข้อมูลจาก API ใน Next.js: การใช้ getStaticProps และ getServerSideProps

ในกระบวนการพัฒนา Next.js แอปพลิเคชัน การดึงข้อมูลจาก API ถือเป็นส่วนสำคัญในการแสดงเนื้อหาแบบไดนามิก บทความนี้จะแนะนำคุณเกี่ยวกับการใช้ getStaticProps ดึงข้อมูลคงที่ระหว่างกระบวนการสร้าง และการใช้ getServerSideProps ดึงข้อมูลจาก API ในแต่ละคำขอ

การใช้ getStaticProps

getStaticProps เป็นวิธีการในตัว Next.js ที่รองรับการดึงข้อมูลคงที่ในระหว่างกระบวนการสร้าง ช่วยให้คุณสร้างเพจแบบคงที่พร้อมข้อมูลที่สืบค้น ซึ่งมีการแสดงผลล่วงหน้าก่อนที่จะปรับใช้แอปพลิเคชัน นี่คือตัวอย่างพื้นฐานของการใช้ getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

ในตัวอย่างข้างต้น เราใช้ fetch เพื่อค้นหาข้อมูลจาก API และส่งคืนข้อมูลเป็นอุปกรณ์ประกอบฉาก

การใช้ getServerSideProps

getServerSideProps เป็นอีกวิธีหนึ่ง Next.js ที่ช่วยให้คุณสามารถดึงข้อมูลจาก API ในแต่ละคำขอได้ เพื่อให้แน่ใจว่าเนื้อหามีความทันสมัยและมีชีวิตชีวาอยู่เสมอ นี่คือตัวอย่างการใช้ getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

วิธี getServerSideProps การจะสืบค้นข้อมูลจาก API ทุกครั้งที่มีการร้องขอไปยังเพจ

บทสรุป

ในส่วนนี้ คุณได้เรียนรู้วิธีดึงข้อมูลจาก API ใน Next.js แอปพลิเคชัน ของคุณอย่างมีประสิทธิภาพ ด้วยการใช้ getStaticProps และ getServerSideProps คุณสามารถแสดงเนื้อหาทั้งแบบคงที่และไดนามิกได้อย่างยืดหยุ่นในแอปพลิเคชันของคุณ