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.

Next.js to solidny framework, który pozwala programistom szybko budować aplikacje React renderowane po stronie serwera. Ma różne podstawowe funkcje. Jedną z jego kluczowych cech jest możliwość łatwego pobierania danych i udostępniania ich komponentom.

Pobieranie danych to podstawowa funkcja, która umożliwia programistom pobieranie i wyświetlanie danych na stronie internetowej/aplikacji internetowej. Istnieje kilka różnych sposobów pobierania danych w Next.js, z których każdy ma swoje zalety i przypadki użycia. W tym artykule omówimy różne sposoby pobierania danych w Next.js.

Wykorzystanie haka useEffect do pobierania danych

The UżyjEfekt hak jest React hook służący do wykonywania efektów ubocznych, takie jak wywołania API w komponentach. Możesz użyć haka useEffect, aby pobrać dane w Next.js.

Ten zaczep jest pomocny w przypadku stron, które wymagają danych dynamicznych, takich jak strony profilu użytkownika, które pokazują informacje dotyczące konkretnego użytkownika, który jest zalogowany.

instagram viewer

Aby użyć haka useEffect, najpierw zaimportuj go do wybranego komponentu, pobierz dane i wyrenderuj swoją stronę za jego pomocą.

Na przykład:

import { efekt użycia, stan użycia } z'reagować';
eksportdomyślnyfunkcjonowaćDom() {
konst [dane, setData] = useState("");


 użyjEfekt(() => {
 aportować(' https://api.example.com/data');
 .Następnie( (odpowiedź) => odpowiedź.json() )
 .Następnie( (dane) => setData (dane) )
 }, []); 
powrót (


 {nazwa.danych}
 </div>
 )
}

Ten blok kodu używa haka useEffect do pobierania danych z interfejsu API. If przekazuje dwa parametry do haka useEffect: funkcję pobierającą dane i tablicę zależności. W przypadku sukcesu używa ustawDane() aby zaktualizować stan komponentu o dane zwrócone przez żądanie pobierania.

Tablica zależności przekazywana do haka useEffect powinna zawierać wartość, od której zależy efekt. Komponent ponownie uruchomi efekt tylko wtedy, gdy zmieni się wartość w tablicy zależności. Jeśli tablica zależności jest pusta — jak w tym przykładzie — efekt zostanie uruchomiony tylko przy pierwszym renderowaniu.

Obsługa automatycznej ponownej walidacji za pomocą SWR

The SWR (stale-while-revalidate) to biblioteka haków React do obsługi pobierania danych. Musisz skonfigurować bibliotekę SWR najpierw, aby użyć go w aplikacji Next.

Jedną z kluczowych cech biblioteki SWR jest jej zdolność do automatyzacji ponownej walidacji danych. Ta funkcja jest niezbędna, gdy dane są często aktualizowane i potrzebujesz, aby były stale aktualne. Funkcjonalność ta zapewnia, że ​​Twoja aplikacja ma zawsze dostęp do najbardziej aktualnych danych, dzięki czemu jest bardziej dynamiczna i responsywna dla Twoich użytkowników.

Biblioteka SWR wysyła nowe żądanie pobrania do interfejsu API, gdy użytkownik skupia się ponownie na stronie lub przełącza między kartami. Gdy użytkownik opuszcza stronę, dane wyświetlane na ekranie stają się nieaktualne. Po powrocie na stronę biblioteka SWR wysyła nowe żądanie pobrania do interfejsu API i porównuje nowe dane z nieaktualnymi danymi, aby określić, czy uległy one zmianie.

Aby powstrzymać bibliotekę SWR przed wykonaniem tej akcji, możesz użyć ponownie zweryfikuj OnFocus opcja.

jak tak:

konst { dane, błąd, ładowanie } = useSWR(' https://api.example.com/data', pobieracz, {
 rewalidacja OnFocus: FAŁSZ,
})

Ustawienie właściwości revalidateOnFocus na false zapewni, że biblioteka SWR nie będzie ponownie sprawdzać poprawności danych za każdym razem, gdy ponownie skupisz się na stronie.

Biblioteka SWR ponownie sprawdza poprawność danych za każdym razem, gdy użytkownik ponownie łączy się z Internetem. Ta czynność może być bardzo pomocna w określonych sytuacjach i działa automatycznie.

Aby wyłączyć akcję, możesz użyć rewalidacja przy ponownym połączeniu opcja:

konst { dane, błąd, ładowanie } = useSWR(' https://api.example.com/data', pobieracz, {
 rewalidacja przy ponownym połączeniu: FAŁSZ,
})

Aby wyłączyć automatyczne ponowne sprawdzanie poprawności danych, ustaw właściwości revalidateOnFocus i revalidateOnRecconect na wartość false.

Używanie biblioteki Isomorphic-Unfetch do wykonywania żądań pobierania

The izomorficzne-niepobierane Library to mała, lekka biblioteka, która może wykonywać żądania pobierania w aplikacji Next.js. Biblioteka to doskonała alternatywa dla rodzimego aportować API. Jest prosty w użyciu, co czyni go idealnym dla programistów, którzy dopiero zaczynają tworzyć żądania pobierania.

W starszych przeglądarkach, które nie obsługują natywnego interfejsu API pobierania, możesz użyć funkcji isomorphic-unfetch jako polyfill. Biblioteka isomorphic-unfetch jest minimalistyczna i nadaje się do pracy nad małymi aplikacjami.

Aby użyć funkcji isomorphic-unfetch w aplikacji Next.js, zainstaluj bibliotekę, uruchamiając następujące polecenie:

npm install isomorphic-unfetch

Następnie możesz zaimportować bibliotekę i użyć jej w swoim komponencie do pobierania danych, tak jak poniżej:

import Aportować z„izomorficzny-niepobierany”
import {stan użycia, efekt użycia} z'reagować'
eksportdomyślnyfunkcjonowaćDom() {
konst [dane, setData] = useState(zero)


 użyjEfekt(() => {
 Aportować(' https://api.example.com/data')
 .Następnie( (odpowiedź) => odpowiedź.json)
 .Następnie( (dane) => setData (dane) )
 }, [])

Jeśli (!dane) powrót<dz>Ładowanie...dz>
powrót (


{nazwa.danych}</h1>
 </div>
 )
}

Funkcja isomorphic-unfetch działa zarówno po stronie klienta, jak i po stronie serwera.

Wydajne pobieranie danych za pomocą Next.js

Pobieranie danych jest ważną funkcją podczas tworzenia aplikacji. Next.js zapewnia kilka sposobów pobierania danych, z których każdy ma swoje zalety i kompromisy.

Decydując się na metodę, rozważ kompromisy i upewnij się, że używasz techniki, z którą czujesz się komfortowo.