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

SWR (status-sementara-validasi ulang) adalah metode pengambilan data yang dibangun oleh Vercel. Ini bekerja dengan mengambil data terlebih dahulu, mengirimkan permintaan pengambilan untuk memvalidasi ulang, lalu mengembalikan data yang diperbarui.

SWR sangat kuat karena tidak hanya memungkinkan pengambilan data yang dapat digunakan kembali tetapi juga memiliki caching bawaan, paginasi, dan validasi ulang pada fokus. Menggunakan SWR, situs web menampilkan konten yang di-cache saat mengambil konten terbaru di latar belakang.

Bagaimana SWR Bekerja?

Biasanya, Anda akan melakukannya mengambil data menggunakan Axios atau metode pengambilan. Metode-metode ini terhubung ke sumber data, mengambil dan mengembalikan data, lalu menutup koneksi. Namun, SWR mengambil data secara berbeda. Ia bekerja dalam tiga langkah:

  1. Mengembalikan data basi dari cache.
    2. instagram viewer
  2. Mengirim permintaan pengambilan untuk memvalidasi ulang data.
  3. Mengembalikan data terbaru.

SWR bukan pengganti API pengambilan. Alih-alih, ini memungkinkan Anda merender konten yang di-cache di situs Anda segera setelah pengguna mengunjungi dan memperbarui konten tersebut saat sudah basi.

Jadi bagaimana SWR mengetahui kapan cache tidak valid? Melalui respons header kontrol-cache. Responsnya memiliki dua status: segar dan basi. Keadaan baru berarti cache dapat digunakan kembali sementara keadaan basi berarti tidak valid. Anda menentukan waktu respons tetap valid dalam direktif usia maksimal.

SWR menganggap setiap respons yang di-cache lebih tua dari usia maksimal tidak valid. Setelah aplikasi Anda merender data cache lama, SWR akan memvalidasi ulang dan mengembalikan data baru yang dapat Anda gunakan untuk memperbarui halaman.

Cara Mengambil Data di Next.js Dengan SWR

Mulailah menggunakan SWR di React dengan menginstalnya terlebih dahulu melalui pengelola paket. Perintah ini menggunakan npm.

npm Install swr\n

Dalam file komponen, impor kait useSWR dari swr.

impor gunakan SWR dari"swr"\N

Kait useSWR menerima dua argumen:

  1. Pengidentifikasi unik untuk data. Biasanya URL API.
  2. Fungsi pengambil. Ini adalah fungsi yang digunakan untuk mengambil data. Itu dapat menggunakan pengambilan, Axios, atau alat pengambilan data lainnya.

Pengait mengembalikan data dan objek kesalahan. Pastikan Anda gunakan pengait ini sesuai dengan praktik terbaik.

Berikut adalah contoh yang menunjukkan cara menggunakan hook useSWR.

const pengambil = (... argumen) => ambil(...args).kemudian(res => res.json());\nconst {data, error} = useSWR("/api/data", pengambil);\n

Anda dapat merender data dalam komponen seperti ini:

impor gunakan SWR dari"swr"\nfungsi Beranda () {\n const pengambil = (... argumen) => ambil(...args).kemudian(res => res.json());\n const {data, kesalahan} = useSWR("/api/data", pengambil);\n jika (kesalahan) kembali<div>gagal untuk memuatdiv>\N jika (!data) kembali<div>memuat...div>\N kembali<div>{data}div>\n}\n

Ini adalah implementasi sederhana dari SWR. Itu dokumen SWR pergi lebih mendalam jadi memeriksa mereka untuk mempelajari lebih lanjut.

Mengapa Menggunakan SWR?

SWR memiliki banyak keunggulan dibandingkan metode pengambilan data lainnya.

Caching

Dengan metode pengambilan data tradisional, Anda harus menggunakan spinner atau memuat pesan untuk meningkatkan pengalaman pengguna saat aplikasi mengambil data.

SWR memungkinkan Anda untuk menampilkan data basi kepada pengguna, saat Anda memvalidasinya kembali. Ini berarti pengguna tidak perlu menunggu pengambil mengembalikan data.

Validasi ulang

Melalui validasi ulang, SWR membuat data yang di-cache segar kembali dan halaman dirender ulang dengan data terbaru. Validasi ulang sangat penting untuk situs yang kontennya sering berubah.

Paginasi

Itu gunakan pengait SWRInfinite dari SWR memungkinkan Anda mengimplementasikan paginasi dengan mudah atau bahkan membuat UI pemuatan tak terbatas.

SWR memungkinkan pengguna untuk kembali ke posisi gulir pada halaman saat mereka kembali ke sana. Ini berkontribusi pada pengalaman pengguna yang lebih baik.

Pengambilan Data Bergantung

Anda dapat mengambil data yang bergantung pada data lain. Ini memungkinkan Anda untuk menggunakan data yang dikembalikan dari satu permintaan dalam permintaan lain.

Gunakan SWR untuk Meningkatkan Kegunaan

SWR adalah alat pengambilan data dengan fitur validasi ulang otomatis yang membantu aplikasi merender konten yang di-cache sambil menunggu konten terbaru. Pengguna dapat langsung terlibat dengan konten alih-alih menunggu di server untuk mengembalikan data.

SWR juga membantu Anda membuat paginasi, pemuatan tak terbatas, pemulihan posisi gulir, dan fitur kompleks lainnya. Jika Anda mengambil data yang memerlukan pembaruan rutin, Anda harus mempertimbangkan untuk menggunakannya.