Cara Menggunakan getStaticPaths() di Next.js

getStaticPaths digunakan untuk menentukan daftar rute sehingga next.js dapat melakukan pra-render terhadap semua jalur pada waktu pembuatan.

Dengan asumsi sebuah halaman dengan menggunakan getStaticProps dan memiliki rute yang dinamis, halaman tersebut harus memilik ciri atau ID yang akan dibuat secara statis.

Saat menggunakan getStaticProps dan getStaticPaths di Next.js, sebenarnya memberi tahu next.js untuk melakukan pra-render situs (yaitu mendapatkan semua data awal yang kami perlukan untuk situs tersebut dan menggabungkannya ke dalam HTML, lalu menyajikannya ke dalam browser).

Kapan Harus menggunakan Metode getStaticPaths ?

getStaticPaths digunakan apabila melakukan pra-render terhadap halaman secara statis dengan menggunakan rute dinamis dan :

• Data tersebut dimulai dari CMS yang tidak ada di depan.
• Data diambil dari basis informasi.
• Data diambil dari sistem file.
• Data dapat disimpan secara langsung (tidak eksplisit klien).
• Halaman harus dirender sebelumnya (untuk SEO) dan sangat cepat — getStaticProps menghasilkan file HTML dan JSON, keduanya dapat di-cache oleh CDN untuk performa.

Contoh Kode dengan Menggunakan getStaticPaths

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  };
}
 
// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  };
}
 
export default function Post({ post }) {
  // Render post...
}

Properti pada metode getStaticPaths dapat mengambil 3 nilai diantaranya yaitu: false, true, dan blocking. Bagaimana getStaticProps menjalankan perubahan berdasarkan properti ini.

Fallback: False

ketika kalian menggunakan fallback false maka kalian dapat mengatur ketika memiliki data yang jarang diupdate. ketika kalian memiliki data dinamis maka data akan dibuat setelah next build dan akan dianggap 404 not found oleh next.karena pada dasarnya fallback false ini akan membuat data kita ketika Next build saja.

Fallback: True

Ketika ada parameter baru yang akan diakses oleh pengunjung setelah data di update (Next build), maka Next tidak mengarahkan menjadi 404 not found akan tetapi melakukan pengecekan terhadap fallback yang telah di atur menjadi true, untuk membuat HTML dan JSON baru berisi konten data dari parameter baru tersebut

Fallback: Blocking

Ketika fallback blocking maka halaman yang belum terdapat HTML nya maka akan digenerate dengan SSR (Server Side Rendering) dan setelah proses generate HTML maka akan di simpan untuk ditampilkan jika ada request lagi setelah itu.

Syarat Penggunaan getStaticPaths

• getStaticPaths harus digunakan dengan getStaticProps
• Anda tidak dapat menggunakan getStaticPaths dengan getServerSideProps
• Anda dapat mengekspor getStaticPaths dari Dynamic Route yang juga menggunakan getStaticProps
• Anda tidak dapat mengekspor getStaticPaths dari file non-halaman (misalnya folder komponen Anda)
• Anda harus mengekspor getStaticPaths sebagai fungsi mandiri, dan bukan properti komponen halaman

Penutup

Pada artikel ini kita telah membahas mengenai Cara Menggunakan getStaticPaths() di Next.js. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.