Mengambil Data daripada API dalam Next.js: Menggunakan getStaticProps dan getServerSideProps

Dalam proses membangunkan Next.js aplikasi, mengambil data daripada API adalah aspek penting untuk memaparkan kandungan dinamik. Artikel ini akan membimbing anda menggunakan getStaticProps untuk mengambil data statik semasa proses binaan dan menggunakan getServerSideProps untuk mengambil data daripada API pada setiap permintaan.

Menggunakan getStaticProps

getStaticProps ialah kaedah terbina dalam Next.js yang menyokong pengambilan data statik semasa proses binaan. Ia membolehkan anda membuat halaman statik dengan data yang ditanya, yang diprapaparkan sebelum aplikasi digunakan. Berikut ialah contoh asas penggunaan getStaticProps:

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

Dalam contoh di atas, kami gunakan fetch untuk menanyakan data daripada API dan mengembalikan data sebagai prop.

Menggunakan getServerSideProps

getServerSideProps ialah kaedah lain Next.js yang membolehkan anda mengambil data daripada API pada setiap permintaan. Ini memastikan kandungan sentiasa terkini dan dinamik. Berikut adalah contoh penggunaan getServerSideProps:

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

Kaedah ini getServerSideProps akan menanyakan data daripada API setiap kali permintaan dibuat ke halaman.

Kesimpulan

Dalam bahagian ini, anda telah mempelajari cara mengambil data daripada API dalam Next.js aplikasi anda dengan cekap. Dengan menggunakan getStaticProps dan getServerSideProps, anda boleh memaparkan kandungan statik dan dinamik secara fleksibel dalam aplikasi anda.