Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Next.js adalah kerangka kerja yang kuat yang memungkinkan pengembang untuk dengan cepat membangun aplikasi React yang dirender di sisi server. Ini memiliki berbagai fitur penting. Salah satu fitur utamanya adalah kemampuannya untuk dengan mudah mengambil data dan membuatnya tersedia untuk komponen.

Pengambilan data adalah fitur penting yang memungkinkan developer mengambil dan menampilkan data di situs web/aplikasi web. Ada beberapa cara berbeda untuk mengambil data di Next.js, masing-masing dengan kelebihan dan kasus penggunaannya. Artikel ini akan mengeksplorasi berbagai cara untuk mengambil data di Next.js.

Memanfaatkan useEffect Hook untuk Mengambil Data

Itu useEffect kait adalah a React hook digunakan untuk melakukan efek samping, seperti panggilan API dalam komponen. Anda dapat menggunakan hook useEffect untuk mengambil data di Next.js.

instagram viewer

Pengait ini bermanfaat untuk halaman yang membutuhkan data dinamis, seperti halaman profil pengguna yang menampilkan informasi khusus untuk pengguna yang masuk.

Untuk menggunakan hook useEffect, pertama-tama Anda mengimpornya ke dalam komponen pilihan Anda, mengambil datanya, dan merender halaman Anda menggunakannya.

Misalnya:

impor { useEffect, useState } dari'reaksi';
eksporbawaanfungsiRumah() {
const [data, setData] = useState("");


 gunakanEfek(() => {
 mengambil(' https://api.example.com/data');
 .Kemudian( (tanggapan) => respon.json() )
 .Kemudian( (data) => setData (data) )
 }, []); 
kembali (


 {nama.data}
 </div>
 )
}

Blok kode ini menggunakan kait useEffect untuk mengambil data dari API. Jika meneruskan dua parameter ke hook useEffect: fungsi untuk mengambil data dan larik ketergantungan. Pada kesuksesan, ia menggunakan setData() untuk memperbarui status komponen dengan data yang dikembalikan oleh permintaan pengambilan.

Array dependensi yang Anda berikan ke hook useEffect harus berisi nilai yang bergantung pada efeknya. Komponen akan menjalankan kembali efeknya hanya ketika nilai dalam larik ketergantungan berubah. Jika larik dependensi kosong—seperti dalam contoh ini—efek hanya akan berjalan pada render pertama.

Penanganan Validasi Ulang Otomatis Menggunakan SWR

Itu SWR (stale-while-revalidate) library adalah library React hook untuk menangani pengambilan data. Kamu harus mengatur perpustakaan SWR pertama, untuk menggunakannya di aplikasi Berikutnya Anda.

Salah satu fitur utama perpustakaan SWR adalah kemampuannya untuk mengotomatiskan validasi ulang data. Fitur ini sangat penting ketika data sering diperbarui dan Anda memerlukannya untuk selalu diperbarui secara konsisten. Fungsionalitas ini memastikan bahwa aplikasi Anda selalu memiliki akses ke data terbaru, menjadikannya lebih dinamis dan responsif terhadap pengguna Anda.

Pustaka SWR membuat permintaan pengambilan baru ke API saat pengguna kembali fokus pada halaman atau beralih antar tab. Saat pengguna meninggalkan halaman, data yang ditampilkan di layar menjadi basi. Ketika mereka kembali ke halaman, pustaka SWR mengirimkan permintaan pengambilan baru ke API dan membandingkan data baru dengan data lama untuk menentukan apakah data tersebut telah berubah.

Untuk menghentikan perpustakaan SWR melakukan tindakan ini, Anda dapat menggunakan validasi ulangOnFocus pilihan.

Seperti itu:

const { data, error, isLoading } = useSWR(' https://api.example.com/data', pengambil, {
 validasi ulangOnFocus: PALSU,
})

Menyetel properti revalidateOnFocus ke false akan memastikan bahwa pustaka SWR tidak memvalidasi ulang data Anda setiap kali Anda memfokuskan kembali pada halaman.

Pustaka SWR juga memvalidasi ulang data setiap kali pengguna terhubung kembali ke internet. Tindakan ini bisa sangat membantu dalam situasi tertentu dan bekerja secara otomatis.

Untuk menonaktifkan tindakan, Anda dapat menggunakan validasi ulangOnReconnect pilihan:

const { data, error, isLoading } = useSWR(' https://api.example.com/data', pengambil, {
 validasi ulangOnReconnect: PALSU,
})

Untuk menonaktifkan validasi ulang otomatis data Anda, atur properti revalidateOnFocus dan revalidateOnRecconect ke false.

Menggunakan Perpustakaan Isomorphic-Unfetch untuk Melakukan Permintaan Pengambilan

Itu isomorphic-unfetch library adalah library kecil dan ringan yang dapat melakukan permintaan pengambilan di aplikasi Next.js. Perpustakaan adalah alternatif yang sangat baik untuk yang asli mengambil API. Ini mudah digunakan, yang membuatnya sempurna bagi pengembang yang baru membuat permintaan pengambilan.

Anda dapat menggunakan isomorphic-unfetch sebagai polyfill untuk browser lama yang tidak mendukung API pengambilan asli. Pustaka isomorphic-unfetch minimalis dan cocok untuk mengerjakan aplikasi kecil.

Untuk menggunakan isomorphic-unfetch di aplikasi Next.js, instal library dengan menjalankan perintah berikut:

npm instal isomorphic-unfetch

Anda kemudian dapat mengimpor pustaka dan menggunakannya dalam komponen Anda untuk mengambil data, seperti ini:

impor Mengambil dari'isomorfik-tidak diambil'
impor {useState, useEffect} dari'reaksi'
eksporbawaanfungsiRumah() {
const [data, setData] = useState(batal)


 gunakanEfek(() => {
 Mengambil(' https://api.example.com/data')
 .Kemudian( (tanggapan) => response.json)
 .Kemudian( (data) => setData (data) )
 }, [])

jika (!data) kembali<div>Memuat...div>
kembali (


{data.nama}</h1>
 </div>
 )
}

Fungsi isomorphic-unfetch bekerja di sisi klien dan sisi server.

Pengambilan Data Efisien Dengan Next.js

Pengambilan data adalah fitur penting saat mengembangkan aplikasi. Next.js menyediakan beberapa cara untuk mengambil data, yang masing-masing memiliki kelebihan dan kekurangannya.

Saat memutuskan metode yang akan digunakan, pertimbangkan kompromi dan pastikan Anda menggunakan teknik yang nyaman bagi Anda.