Cara Next.js mempercepat navigasi dengan pengambilan data rute dan cara menyesuaikannya.
Apa yang akan Anda pelajari?
Dalam postingan ini, Anda akan mempelajari cara kerja pemilihan rute di Next.js, cara mengoptimalkan kecepatan, dan cara menyesuaikannya agar sesuai dengan kebutuhan Anda.
Komponen <Link>
Di Next.js, Anda tidak perlu menyiapkan perutean secara manual.
Next.js menggunakan perutean berbasis sistem file, yang memungkinkan Anda membuat file dan folder
di dalam direktori ./pages/
:
Untuk menautkan ke halaman yang berbeda, gunakan
komponen <Link>
, sama seperti cara Anda
menggunakan elemen <a>
lama yang bagus:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Saat Anda menggunakan komponen <Link>
untuk navigasi, Next.js akan melakukan lebih banyak hal
untuk Anda. Biasanya, halaman akan didownload saat Anda mengikuti link ke halaman tersebut, tetapi Next.js secara otomatis mengambil data JavaScript yang diperlukan untuk merender halaman.
Saat Anda memuat halaman dengan beberapa link, kemungkinan besar saat Anda mengikuti link, komponen di balik link tersebut telah diambil. Hal ini meningkatkan responsivitas aplikasi dengan membuat navigasi ke halaman baru lebih cepat.
Pada contoh aplikasi di bawah, halaman index.js
ditautkan ke margherita.js
dengan
<Link>
:
Gunakan Chrome DevTools untuk memverifikasi bahwa margherita.js
telah diambil data:
1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh
.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Network
Centang kotak Disable cache.
Muat ulang halaman.
Saat Anda memuat index.js
, tab Jaringan akan menunjukkan bahwa margherita.js
juga telah didownload:
Cara kerja pengambilan data otomatis
Pengambilan data Next.js hanya dilakukan link yang muncul di area tampilan dan menggunakan Intersection
Observer API
untuk mendeteksinya. Tindakan ini juga menonaktifkan pengambilan data saat koneksi jaringan lambat
atau saat pengguna
mengaktifkan
Save-Data
. Berdasarkan pemeriksaan ini, Next.js secara dinamis memasukkan tag <link
rel="preload">
untuk mendownload komponen untuk
navigasi berikutnya.
Next.js hanya mengambil JavaScript, tetapi tidak menjalankannya. Dengan begitu, tindakan tidak mendownload konten tambahan yang mungkin diminta oleh halaman pengambilan data hingga Anda membuka link tersebut.
Menghindari pengambilan data yang tidak perlu
Untuk menghindari download konten yang tidak diperlukan, Anda dapat menonaktifkan pengambilan data untuk halaman yang jarang
dikunjungi dengan menetapkan properti prefetch
di <Link>
ke false
:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
Pada aplikasi contoh kedua ini, halaman index.js
memiliki <Link>
ke pineapple-pizza.js
dengan prefetch
ditetapkan ke false
:
Untuk memeriksa aktivitas jaringan, ikuti langkah-langkah dari contoh pertama. Saat
Anda memuat index.js
, tab Jaringan DevTools akan menunjukkan bahwa margherita.js
telah didownload, tetapi pineapple-pizza.js
tidak:
Pengambilan data dengan perutean khusus
Komponen <Link>
cocok untuk sebagian besar kasus penggunaan, tetapi Anda juga dapat membuat
komponen Anda sendiri untuk melakukan perutean. Next.js memudahkan Anda dengan
API router yang tersedia di next/router
.
Jika ingin melakukan sesuatu (misalnya, mengirimkan formulir) sebelum memilih rute baru, Anda dapat menentukannya di kode pemilihan rute kustom.
Saat menggunakan komponen kustom untuk perutean, Anda juga dapat menambahkan pengambilan data ke komponen tersebut.
Untuk menerapkan pengambilan data dalam kode perutean, gunakan metode prefetch
dari useRouter
.
Lihat components/MyLink.js
dalam aplikasi contoh ini:
Pengambilan data dilakukan di dalam hook
useEffect
. Jika properti prefetch
pada <MyLink>
ditetapkan ke true
, rute yang ditentukan dalam properti href
akan diambil data saat <MyLink>
tersebut dirender:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Saat Anda mengklik link, pemilihan rute akan selesai di handleClick
. Pesan akan
dicatat ke konsol, dan metode push
akan membuka rute baru
yang ditentukan di href
:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
Dalam aplikasi contoh ini, halaman index.js
memiliki <MyLink>
untuk margherita.js
dan
pineapple-pizza.js
. Properti prefetch
disetel ke true
pada /margherita
dan ke false
pada /pineapple-pizza
.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
Saat Anda memuat index.js
, tab Jaringan akan menunjukkan bahwa margherita.js
telah
didownload dan pineapple-pizza.js
bukan:
Saat Anda mengklik salah satu link, Console akan mencatat log "Bersenang-senang dengan Next.js". dan menavigasi ke rute baru:
Kesimpulan
Saat Anda menggunakan <Link>
, Next.js secara otomatis mengambil data JavaScript yang diperlukan untuk merender halaman tertaut, sehingga mempercepat navigasi ke halaman baru. Jika menggunakan perutean kustom, Anda dapat menggunakan API router Next.js untuk menerapkan pengambilan data sendiri. Hindari mendownload konten secara tidak perlu dengan menonaktifkan pengambilan data untuk halaman yang jarang dikunjungi.