Co to jest SWR i jak go używać w Next.js?

SWR (state-while-revalidate) to metoda pobierania danych stworzona przez firmę Vercel. Działa poprzez najpierw pobranie danych, wysłanie żądania pobrania w celu ich ponownej walidacji, a następnie zwrócenie zaktualizowanych danych.

SWR jest bardzo potężny, ponieważ nie tylko umożliwia pobieranie danych wielokrotnego użytku, ale także ma wbudowane buforowanie, podział na strony i ponowne sprawdzanie poprawności w przypadku fokusu. Korzystając z SWR, witryna internetowa wyświetla zawartość z pamięci podręcznej, podczas gdy pobiera aktualne treści w tle.

Jak działa SWR?

Zwykle pobierałbyś dane za pomocą Axios lub metody pobierania. Te metody łączą się z zasobem danych, pobierają i zwracają dane, a następnie zamykają połączenie. Jednak SWR pobiera dane inaczej. Działa w trzech krokach:

1. Zwraca nieaktualne dane z pamięci podręcznej.
2. Wysyła żądanie pobrania w celu ponownej weryfikacji danych.
3. Zwraca aktualne dane.

SWR nie zastępuje interfejsu API pobierania. Zamiast tego umożliwia renderowanie zawartości pamięci podręcznej w Twojej witrynie, gdy tylko użytkownik ją odwiedzi, i aktualizowanie tej zawartości, gdy stanie się nieaktualna.

Skąd więc SWR wie, kiedy pamięć podręczna jest nieprawidłowa? Poprzez odpowiedź nagłówka kontroli pamięci podręcznej. Odpowiedź ma dwa stany: świeży i nieaktualny. Świeży stan oznacza, że ​​pamięć podręczna może być ponownie użyta, a nieaktualny stan oznacza, że ​​jest nieprawidłowa. Określasz czas, przez jaki odpowiedź pozostaje ważna w dyrektywie max-age.

SWR uważa każdą odpowiedź w pamięci podręcznej starszą niż maksymalny wiek za nieważną. Gdy Twoja aplikacja wyrenderuje nieaktualne dane z pamięci podręcznej, SWR zweryfikuje je ponownie i zwróci nowe dane, których możesz użyć do aktualizacji strony.

Jak pobierać dane w Next.js za pomocą SWR

Zacznij używać SWR w React, instalując go najpierw za pomocą menedżera pakietów. To polecenie używa npm.

npm install swr\n

W pliku komponentu zaimportuj hak useSWR z pliku swr.

import useSWR from "swr"\n

Hak useSWR przyjmuje dwa argumenty:

1. Unikalny identyfikator danych. Zwykle adres URL interfejsu API.
2. Funkcja pobierania. Jest to funkcja używana do pobierania danych. Może używać narzędzi pobierania, Axios lub innych narzędzi do pobierania danych.

Hak zwraca dane i obiekt błędu. Upewnij się, że używasz tego haka zgodnie z najlepszymi praktykami.

Oto przykład pokazujący, jak używać haka useSWR.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Możesz renderować dane w komponencie w następujący sposób:

import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Jest to prosta implementacja SWR. Dokumenty SWR są bardziej szczegółowe, więc sprawdź je, aby dowiedzieć się więcej.

Dlaczego warto używać SWR?

SWR ma wiele zalet w porównaniu z innymi metodami pobierania danych.

Buforowanie

W przypadku tradycyjnych metod pobierania danych musisz użyć pokrętła lub wiadomości ładującej, aby poprawić wrażenia użytkownika podczas pobierania danych przez aplikację.

SWR umożliwia wyświetlanie użytkownikowi nieaktualnych danych podczas ich ponownej walidacji. Oznacza to, że użytkownik nie musi czekać, aż program pobierający zwróci dane.

Rewalidacja

Poprzez ponowną walidację SWR ponownie odświeża dane w pamięci podręcznej, a strona jest ponownie renderowana z aktualnymi danymi. Ponowna walidacja jest szczególnie ważna w przypadku witryn, których zawartość regularnie się zmienia.

Paginacja

Hak useSWRInfinite z SWR pozwala łatwo zaimplementować paginację, a nawet stworzyć nieskończony interfejs ładowania.

Odzyskiwanie pozycji przewijania

SWR umożliwia użytkownikowi powrót do pozycji przewijania na stronie, gdy do niej wróci. Przyczynia się to do lepszego doświadczenia użytkownika.

Zależne pobieranie danych

Możesz pobierać dane zależne od innych danych. Pozwala na wykorzystanie danych zwróconych z jednego żądania w innym żądaniu.

Użyj SWR, aby poprawić użyteczność

SWR to narzędzie do pobierania danych z funkcją automatycznego sprawdzania poprawności, która pomaga aplikacjom renderować zawartość buforowaną podczas oczekiwania na aktualną zawartość. Użytkownicy mogą od razu wchodzić w interakcję z treścią, zamiast czekać, aż serwer zwróci dane.

SWR pomaga również tworzyć paginację, nieskończone ładowanie, odzyskiwanie pozycji przewijania i inne złożone funkcje. Jeśli pobierasz dane, które wymagają regularnych aktualizacji, zdecydowanie powinieneś rozważyć ich użycie.