Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

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?

Normalnie byś to zrobił pobierz 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.
instagram viewer

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.

np zainstalować swr\n

W pliku komponentu zaimportuj hak useSWR z pliku swr.

import użyj SWR z"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żywaj tego haka zgodnie z najlepszymi praktykami.

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

konst pobierający = (... argumenty) => fetch(...args).then(rez => res.json());\nconst {dane, błąd} = useSWR("/api/dane", moduł pobierania);\n

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

import użyj SWR z"swr"\nfunkcja Dom () {\n konst pobierający = (... argumenty) => fetch(...args).then(rez => res.json());\n konst {dane, błąd} = użyjSWR("/api/dane", moduł pobierania);\n Jeśli (błąd) powrót<dz>nie udało się załadowaćdz>\N Jeśli (!dane) powrót<dz>Ładowanie...dz>\N powrót<dz>{dane}dz>\n}\n

Jest to prosta implementacja SWR. The Dokumenty SWR przejdź bardziej szczegółowo, 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 komunikatu ładowania, 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

The użyjSWRInieskończonego haka z SWR pozwala łatwo zaimplementować paginację, a nawet stworzyć nieskończony interfejs ładowania.

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.