Menggunakan SWR React Hooks Dengan Incremental Static Regeneration (ISR) Next.js

Diterbitkan: 2022-03-10

Ringkasan cepat Saat dipasangkan dengan rute API ISR dan Next.js, SWR dapat digunakan untuk menciptakan pengalaman pengguna yang responsif. Dalam artikel ini, Sam Poder menjelaskan apa itu SWR, di mana menggunakannya (dan di mana tidak), dan bagaimana membangun situs web dengan menggunakan Incremental Static Regeneration.

Jika Anda pernah menggunakan Incremental Static Regeneration (ISR) dengan Next.js, Anda mungkin mendapati diri Anda mengirimkan data basi ke klien. Ini terjadi saat Anda memvalidasi ulang halaman di server. Untuk beberapa situs web ini berfungsi, tetapi untuk yang lain (seperti Scrapbook Hack Club, situs yang dibangun oleh @lachlanjc yang saya bantu pelihara), pengguna mengharapkan data tetap mutakhir.

Solusi pertama yang terlintas dalam pikiran mungkin hanya dengan merender halaman dari sisi server, memastikan bahwa klien selalu dikirimi data terbaru. Namun, mengambil sebagian besar data sebelum rendering dapat memperlambat pemuatan halaman awal. Solusi yang digunakan dalam Scrapbook adalah dengan menggunakan pustaka SWR dari kait React untuk memperbarui halaman yang di-cache dari server dengan pengambilan data sisi klien . Pendekatan ini memastikan bahwa pengguna masih memiliki pengalaman yang baik, bahwa situsnya cepat dan datanya selalu up to date.

Temui SWR

SWR adalah library React Hooks yang dibuat oleh Vercel, namanya berasal dari istilah stale-while-revalidate. Seperti namanya, klien Anda akan disajikan data basi/lama sementara data terbaru sedang diambil (validasi ulang) melalui SWR di sisi klien. SWR tidak hanya memvalidasi ulang data sekali, namun, Anda dapat mengonfigurasi SWR untuk memvalidasi ulang data pada suatu interval, saat tab mendapatkan kembali fokus, saat klien terhubung kembali ke Internet atau secara terprogram.

Saat dipasangkan dengan rute API ISR dan Next.js, SWR dapat digunakan untuk membuat pengalaman pengguna yang responsif . Klien pertama kali dilayani halaman yang dibuat secara statis dalam cache (dihasilkan dengan getStaticProps() ), di latar belakang server juga memulai proses validasi ulang halaman tersebut (baca selengkapnya di sini). Proses ini terasa cepat bagi klien dan mereka sekarang dapat melihat kumpulan data, namun mungkin sedikit ketinggalan zaman. Setelah halaman dimuat, permintaan pengambilan dibuat ke rute Next.js API milik Anda yang mengembalikan data yang sama seperti yang dihasilkan dengan getStaticProps() . Ketika permintaan ini selesai (dengan asumsi itu berhasil), SWR akan memperbarui halaman dengan data baru ini.

Sekarang mari kita lihat kembali Scrapbook dan bagaimana ini membantu memecahkan masalah memiliki data basi di halaman . Yang jelas sekarang, klien mendapatkan versi yang diperbarui. Hal yang lebih menarik, bagaimanapun, adalah dampak pada kecepatan pihak kita. Saat kami mengukur kecepatan melalui Lighthouse, kami mendapatkan indeks kecepatan 1,5 detik untuk varian ISR + SWR situs dan 5,8 detik untuk varian Server Side Rendering (ditambah peringatan mengenai waktu respons server awal). Itu kontras yang cukup mencolok antara keduanya (dan itu terlihat saat memuat halaman juga). Tetapi ada juga tradeoff, pada halaman Server Side Rendered pengguna tidak memiliki tata letak situs yang berubah setelah beberapa detik dengan data baru masuk. Sementara saya percaya Scrapbook menangani pembaruan ini dengan baik, ini merupakan pertimbangan penting ketika merancang pengalaman pengguna Anda.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Di mana Menggunakan SWR (Dan Di Mana Tidak)

SWR dapat ditempatkan di berbagai tempat, berikut adalah beberapa kategori situs di mana SWR akan sangat cocok:

Situs dengan data langsung yang memerlukan pembaruan dengan cepat.
Contoh situs tersebut adalah situs skor olahraga dan pelacakan penerbangan. Saat membangun situs ini, Anda akan menggunakan opsi validasi ulang pada interval dengan pengaturan interval rendah (satu hingga lima detik).
Situs dengan gaya feed update atau postingan yang update secara realtime.
Contoh klasiknya adalah situs berita yang memiliki blog langsung tentang acara-acara seperti pemilihan umum. Contoh lain adalah Scrapbook yang disebutkan di atas juga. Dalam hal ini, Anda juga mungkin ingin menggunakan opsi validasi ulang pada interval tetapi dengan pengaturan interval yang lebih tinggi (tiga puluh hingga enam puluh detik) untuk menghemat penggunaan data dan mencegah panggilan API yang tidak perlu.
Situs dengan pembaruan data yang lebih pasif, yang sering dibuka orang di latar belakang.
Contoh situs ini adalah halaman cuaca atau halaman nomor kasus COVID-19 tahun 2020-an. Halaman-halaman ini tidak sering diperbarui dan oleh karena itu tidak memerlukan validasi ulang yang konstan dari dua contoh sebelumnya. Namun, itu masih akan meningkatkan pengalaman pengguna untuk memperbarui data. Dalam kasus ini, saya akan merekomendasikan memvalidasi ulang tanggal ketika tab mendapatkan kembali fokus dan ketika klien terhubung kembali ke internet, itu berarti jika seseorang dengan cemas kembali ke keran berharap hanya ada sedikit peningkatan kasus COVID, mereka akan mendapatkan data itu dengan cepat.
Situs dengan potongan kecil data yang dapat berinteraksi dengan pengguna.
Pikirkan Tombol Berlangganan Youtube, ketika Anda mengklik berlangganan, Anda ingin melihat perubahan itu dan merasa seperti Anda telah membuat perbedaan. Dalam kasus ini, Anda dapat memvalidasi ulang data secara terprogram menggunakan SWR untuk mengambil hitungan baru dan memperbarui jumlah yang ditampilkan.

Satu hal yang perlu diperhatikan, semua ini dapat diterapkan dengan atau tanpa ISR.

Tentu saja ada beberapa tempat di mana Anda tidak ingin menggunakan SWR atau menggunakan SWR tanpa ISR. SWR tidak banyak digunakan jika data Anda tidak berubah atau sangat jarang berubah dan sebaliknya dapat menyumbat permintaan jaringan Anda dan menghabiskan data pengguna seluler. SWR dapat bekerja dengan halaman yang memerlukan otentikasi, namun Anda akan ingin menggunakan Server Side Rendering dalam kasus ini dan bukan Regenerasi Statis Inkremental.

Menggunakan SWR Dengan Next.js Dan Regenerasi Statis Inkremental

Sekarang kita telah menjelajahi teori strategi ini, mari kita telusuri bagaimana kita mempraktikkannya. Untuk ini kami akan membangun situs web yang menunjukkan berapa banyak taksi yang tersedia di Singapura (tempat saya tinggal!) menggunakan API yang disediakan oleh pemerintah ini.

Struktur Proyek

Proyek kami akan bekerja dengan memiliki tiga file:

lib/helpers.js
pages/index.js (file frontend kami)
pages/api/index.js (file API kami)

File pembantu kami akan mengekspor fungsi ( getTaxiData ) yang akan mengambil data dari API eksternal, dan kemudian mengembalikannya dalam format yang sesuai untuk kami gunakan. File API kita akan mengimpor fungsi itu dan akan mengatur ekspor defaultnya ke fungsi handler yang akan memanggil fungsi getTaxiData dan kemudian mengembalikannya, ini berarti mengirim permintaan GET ke /api akan mengembalikan data kita.

Kami akan membutuhkan kemampuan ini untuk SWR untuk melakukan pengambilan data sisi klien. Terakhir, di file frontend kami, kami akan mengimpor getTaxiData dan menggunakannya di getStaticProps , datanya akan diteruskan ke fungsi ekspor default dari file frontend kami yang akan membuat halaman React kami. Kami melakukan ini semua untuk mencegah duplikasi kode dan memastikan konsistensi dalam data kami. Benar-benar seteguk, mari kita mulai pemrograman sekarang.

File Pembantu

Kita akan mulai dengan membuat fungsi getTaxiData di lib/helpers.js :

 export async function getTaxiData(){ let data = await fetch("https://api.data.gov.sg/v1/transport/taxi-availability").then(r => r.json()) return {taxis: data.features.properties[0].taxi_count, updatedAt: data.features.properties[0].timestamp} }

File API

Kami kemudian akan membangun fungsi handler di api/index.js serta mengimpor fungsi getTaxiData :

 import { getTaxiData } from '../../lib/helpers' export default async function handler(req, res){ res.status(200).json(await getTaxiData()) }

Tidak ada sesuatu yang unik di sini untuk SWR atau ISR, selain struktur proyek yang disebutkan di atas. Hal itu dimulai sekarang di index.js !

File Ujung Depan

Hal pertama yang ingin kita lakukan adalah membuat fungsi getStaticProps ! Fungsi ini akan mengimpor fungsi getTaxiData kami, menggunakannya dan kemudian mengembalikan data dengan beberapa konfigurasi tambahan.

 export async function getStaticProps(){ const { getTaxiData } = require("../lib/helpers") return { props: (await getTaxiData()), revalidate: 1 } }

Saya ingin fokus pada kunci validasi ulang di objek yang dikembalikan. Kunci ini secara praktis memungkinkan Regenerasi Statis Inkremental. Ini memberi tahu host Anda bahwa setiap satu detik membuat ulang halaman statis adalah opsi yang tersedia, opsi itu kemudian dipicu di latar belakang ketika klien mengunjungi halaman Anda. Anda dapat membaca lebih lanjut tentang Incremental Static Regeneration (ISR) di sini.

Sekarang saatnya menggunakan SWR! Mari kita impor dulu:

 import useSWR from 'swr'

Kami akan menggunakan SWR dalam fungsi React-rendering kami, jadi mari buat fungsi itu:

 export default function App(props){ }

Kami menerima props dari getStaticProps . Sekarang kita siap untuk menyiapkan SWR:

 const fetcher = (...args) => fetch(...args).then(res => res.json()) const { data } = useSWR("/api", fetcher, {fallbackData: props, refreshInterval: 30000})

Mari kita hancurkan ini. Pertama, kita mendefinisikan fetcher. Ini diperlukan oleh SWR sebagai argumen sehingga ia tahu cara mengambil data Anda mengingat kerangka kerja yang berbeda, dll., dapat memiliki pengaturan yang berbeda. Dalam hal ini, saya menggunakan fungsi yang disediakan di halaman dokumen SWR. Kemudian kita memanggil hook useSWR , dengan tiga argumen: jalur untuk mengambil data, fungsi fetcher, dan kemudian objek opsi.

Dalam objek options itu, kami telah menetapkan dua hal:

Data mundur;
Interval di mana SWR harus memvalidasi ulang data.

Opsi data cadangan adalah tempat kami menyediakan data yang diambil dari getStaticProps yang memastikan bahwa data terlihat dari awal. Terakhir, kami menggunakan destrukturisasi objek untuk mengekstrak data dari hook.

Untuk menyelesaikannya, kami akan merender data tersebut dengan beberapa BEJ yang sangat mendasar:

 return <div>As of {data.updatedAt}, there are {data.taxis} taxis available in Singapore!</div>

Dan, kami telah melakukannya! Di sana kami memiliki contoh yang sangat sederhana dalam menggunakan SWR dengan Incremental Static Regeneration. (Sumber contoh kami tersedia di sini.)

Jika Anda pernah mengalami data basi dengan ISR, Anda tahu siapa yang harus dihubungi: SWR.

Bacaan Lebih Lanjut tentang SmashingMag

Pustaka SWR React Hooks
Pengantar SWR: React Hooks Untuk Pengambilan Data Jarak Jauh, Ibrahima Ndaw
ISR vs DPR: Kata-kata Besar, Penjelasan Singkat, Cassidy Williams
Gaya Global vs. Lokal Di Next.js, Alexander Dubovoj
Perutean Sisi Klien Di Next.js, Adebiyi Adedotun Lukman