Jak obsługiwać pobieranie danych w Next.js
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
Hak useEffect to hak React używany do wykonywania efektów ubocznych, takich 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.
Aby użyć haka useEffect, najpierw zaimportuj go do wybranego komponentu, pobierz dane i wyrenderuj swoją stronę za jego pomocą.
Na przykład:
import { useEffect, useState } from 'react';
export default function Home() {
const [data, setData] = useState("");
useEffect(() => {
fetch('https://api.example.com/data');
.then((response) => response.json())
.then((data) => setData(data))
}, []);
return (
<div>
{data.name}
</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. Jeśli się powiedzie, używa funkcji setData() do zaktualizowania stanu 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
Biblioteka SWR (stale-while-revalidate) to biblioteka haków React do obsługi pobierania danych. Musisz najpierw skonfigurować bibliotekę SWR, aby użyć jej w następnej aplikacji.
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ć opcji revalidateOnFocus .
jak tak:
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnFocus: false,
})
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ć opcji revalidateOnReconnect :
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnReconnect: false,
})
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
Biblioteka isomorphic-unfetch to mała, lekka biblioteka, która może wykonywać żądania pobierania w aplikacji Next.js. Biblioteka jest doskonałą alternatywą dla natywnego interfejsu API pobierania . Jest prosty w użyciu, co czyni go idealnym dla programistów, którzy dopiero zaczynają tworzyć żądania pobierania.
Możesz użyć isomorphic-unfetch jako polyfill dla starszych przeglądarek, które nie obsługują natywnego interfejsu API pobierania. 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 Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'
export default function Home() {
const [data, setData] = useState(null)
useEffect(() => {
Fetch('https://api.example.com/data')
.then((response) => response.json)
.then((data) => setData(data))
}, [])
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</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.
Dodaj komentarz