Merutekan pengambilan data di Next.js

Cara Next.js mempercepat navigasi dengan pengambilan data rute dan cara menyesuaikannya.

Milica Mihajlija

Dalam postingan ini, Anda akan mempelajari cara kerja perutean di Next.js, cara pengoptimalannya untuk kecepatan, dan cara menyesuaikannya agar paling sesuai dengan kebutuhan Anda.

Di Next.js, Anda tidak perlu menyiapkan perutean secara manual. Next.js menggunakan pemilihan rute berbasis sistem file, yang memungkinkan Anda membuat file dan folder di dalam direktori ./pages/:

Direktori halaman yang berisi tiga file: index.js, margherita.js, dan pineapple-pizza.js.

Untuk menautkan ke halaman yang berbeda, gunakan komponen <Link>, mirip dengan cara Anda menggunakan elemen <a> lama:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Saat Anda menggunakan komponen <Link> untuk navigasi, Next.js akan melakukan sedikit lebih banyak hal untuk Anda. Biasanya, halaman didownload saat Anda membuka link ke halaman tersebut, tetapi Next.js otomatis melakukan pengambilan data awal JavaScript yang diperlukan untuk merender halaman.

Saat Anda memuat halaman dengan beberapa link, kemungkinan besar saat Anda mengikuti link, komponen di baliknya sudah diambil. Hal ini meningkatkan responsivitas aplikasi dengan mempercepat navigasi ke halaman baru.

Di aplikasi contoh, halaman index.js ditautkan ke margherita.js dengan <Link>:

Gunakan Chrome DevTools untuk memverifikasi bahwa margherita.js telah di-prefetch: 1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.

  1. Buka Chrome DevTools.
  2. Klik tab Jaringan.
  3. Centang kotak Nonaktifkan cache.
  4. Muat ulang halaman.

Saat Anda memuat index.js, tab Network menunjukkan bahwa margherita.js juga didownload:

Tab Jaringan DevTools dengan margherita.js ditandai.

Cara kerja pengambilan data otomatis

Next.js melakukan pengambilan data terlebih dahulu hanya untuk link yang muncul di area tampilan dan menggunakan Intersection Observer API untuk mendeteksinya. API ini juga menonaktifkan pengambilan data terlebih dahulu saat koneksi jaringan lambat atau saat pengguna telah mengaktifkan Save-Data. Berdasarkan pemeriksaan ini, Next.js menyisipkan tag <link rel="preload"> secara dinamis untuk mendownload komponen untuk navigasi berikutnya.

Next.js hanya mengambil JavaScript; tidak menjalankannya. Dengan begitu, browser tidak akan mendownload konten tambahan yang mungkin diminta oleh halaman yang telah di-prefetch hingga Anda membuka link tersebut.

Menghindari pengambilan data terlebih dahulu yang tidak perlu

Untuk menghindari download konten yang tidak perlu, Anda dapat menonaktifkan pengambilan data sebelumnya untuk halaman yang jarang dikunjungi dengan menyetel properti prefetch pada <Link> ke false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

Di aplikasi contoh kedua ini, halaman index.js memiliki <Link> ke pineapple-pizza.js dengan prefetch disetel ke false:

Untuk memeriksa aktivitas jaringan, ikuti langkah-langkah dari contoh pertama. Saat Anda memuat index.js, tab Jaringan DevTools menunjukkan bahwa margherita.js telah didownload, tetapi pineapple-pizza.js belum:

Tab Jaringan DevTools dengan margherita.js ditandai.

Melakukan pengambilan data dengan perutean kustom

Komponen <Link> cocok untuk sebagian besar kasus penggunaan, tetapi Anda juga dapat membuat komponen sendiri untuk melakukan pemilihan rute. Next.js mempermudah hal ini dengan API router yang tersedia di next/router. Jika Anda ingin melakukan sesuatu (misalnya, mengirimkan formulir) sebelum membuka rute baru, Anda dapat menentukannya dalam kode perutean kustom.

Saat menggunakan komponen kustom untuk perutean, Anda juga dapat menambahkan pengambilan data sebelumnya ke komponen tersebut. Untuk menerapkan pengambilan data sebelumnya dalam kode perutean, gunakan metode prefetch dari useRouter.

Lihat components/MyLink.js dalam contoh aplikasi ini:

Pengambilan data dilakukan di dalam hook useEffect. Jika properti prefetch pada <MyLink> ditetapkan ke true, rute yang ditentukan dalam properti href akan diambil sebelumnya saat <MyLink> tersebut dirender:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Saat Anda mengklik link, perutean dilakukan di handleClick. Pesan akan dicatat ke konsol, dan metode push akan membuka rute baru yang ditentukan dalam href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

Di aplikasi contoh ini, halaman index.js memiliki <MyLink> ke margherita.js dan pineapple-pizza.js. Properti prefetch disetel ke true di /margherita dan ke false di /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

Saat Anda memuat index.js, tab Network menunjukkan bahwa margherita.js didownload dan pineapple-pizza.js tidak:

Tab Jaringan DevTools dengan margherita.js ditandai.

Saat Anda mengklik salah satu link, log Console akan menampilkan "Having fun with Next.js". dan membuka rute baru:

Konsol DevTools menampilkan pesan &#39;Having fun with Next.js.&#39;

Kesimpulan

Saat Anda menggunakan <Link>, Next.js otomatis melakukan pengambilan data awal JavaScript yang diperlukan untuk merender halaman yang ditautkan, sehingga navigasi ke halaman baru menjadi lebih cepat. Jika menggunakan perutean kustom, Anda dapat menggunakan Next.js Router API untuk menerapkan pengambilan data terlebih dahulu sendiri. Hindari mendownload konten yang tidak perlu dengan menonaktifkan pengambilan data awal untuk halaman yang jarang dikunjungi.