Spis Treści

1. Pobieranie danych na serwerze za pomocą fetch
   • 1.1. Automatyczne zapamiętywanie zapytań
   • 1.2. Wpływ na wydajność
2. Cache'owanie danych
   • 2.1. Przykład cache'owania
3. Rewalidacja danych
   • 3.1. Revalidacja czasowa
   • 3.2. Revalidacja na żądanie
4. Route segment config
   • 4.1. Opcje Konfiguracyjne
5. Podsumowanie
   • 5.1. Często zadawane pytania

Sprawdź także: Renderowanie w Next.js - server i client components w pigułce

Efektywne i optymalne pobieranie danych jest niezbędne dla zapewnienia płynności i responsywności aplikacji internetowych. W tym artykule skupimy się na różnych aspektach i technikach pobierania danych w kontekście Next.js. Omówimy metody, które pomogą w efektywnym zarządzaniu danymi, ich cache'owaniu oraz rewalidacji, aby zapewnić użytkownikom najlepsze doświadczenia.

Pobieranie danych na serwerze za pomocą fetch

Next.js, będąc nowoczesnym frameworkiem dla React, wnosi znaczące ulepszenia w procesie pobierania danych, przekraczając granice standardowego interfejsu Web API fetch. To rozszerzenie umożliwia deweloperom nie tylko wykonywanie zapytań sieciowych, ale także precyzyjną kontrolę nad sposobem cache'owania i rewalidacji odpowiedzi z tych zapytań. Dzięki temu, aplikacje stworzone w Next.js mogą być bardziej wydajne, redukując jednocześnie obciążenie serwerów i przyspieszając dostęp do często wykorzystywanych danych.

Automatyczne zapamiętywanie zapytań

Kolejną istotną funkcją, którą oferuje Next.js, jest możliwość automatycznego zapamiętywania zapytań fetch podczas renderowania drzewa komponentów React. Oznacza to, że zapytania wykonywane w ramach komponentów mogą być inteligentnie zarządzane przez framework, zwiększając wydajność poprzez unikanie niepotrzebnych powtórzeń tych samych zapytań. Jest to szczególnie przydatne w scenariuszach, gdzie dane są często ponownie wykorzystywane w różnych częściach aplikacji.

Wpływ na wydajność

Dzięki tym zaawansowanym funkcjom Next.js znacząco wpływa na wydajność. Redukcja liczby zapytań do serwera oraz efektywne wykorzystanie cache'owania oznacza szybsze ładowanie się stron. W rezultacie użytkownicy otrzymują płynniejsze i bardziej satysfakcjonujące doświadczenia, co jest kluczowym elementem sukcesu nowoczesnych aplikacji internetowych.

Cache'owanie danych

Cache'owanie polega na przechowywaniu danych, dzięki czemu nie muszą być one pobierane z zewnętrznego źródła przy każdym zapytaniu. Domyślnie, Next.js automatycznie cache'uje wartości zwracane przez fetch w pamięci cache na serwerze.

Przykład cache'owania

fetch('https://...', { cache: 'force-cache' })

Wartość force-cache jest domyślna, co oznacza, że nie musimy jej za każdym razem dodawać.

Rewalidacja danych

Revalidacja danych jest kluczowym elementem w procesie zarządzania cache'owanymi danymi w aplikacjach internetowych. W kontekście Next.js revalidacja pozwala na odświeżanie przechowywanych danych, zapewniając, że użytkownicy otrzymują najbardziej aktualne informacje. Istnieją dwa główne podejścia do revalidacji: oparta na czasie oraz na żądaniu.

Revalidacja czasowa

Revalidacja czasowa, jak sama nazwa wskazuje, polega na automatycznym odświeżaniu danych po określonym czasie. Jest to szczególnie użyteczne w scenariuszach, gdzie dane zmieniają się w przewidywalny sposób lub gdzie aktualność danych nie jest krytyczna, ale nadal ważna.

Przykład:

fetch('https://...', { next: { revalidate: 3600 } })

W powyższym przykładzie revalidate: 3600 oznacza, że dane będą automatycznie rewalidowane (odświeżane) co godzinę. To oznacza, że jeśli dane zostały pobrane i cache'owane, nie będą ponownie pobierane z serwera przez kolejną godzinę. Po upływie tego czasu, przy następnym zapytaniu, Next.js pobierze świeże dane.

Revalidacja na żądanie

Oprócz revalidacji opartej na czasie istnieje również możliwość revalidacji na żądanie. Ta metoda jest przydatna w sytuacjach, gdy dane muszą być odświeżane natychmiast po pewnych zdarzeniach, na przykład po aktualizacji zawartości przez użytkownika lub w przypadku otrzymania nowych danych z zewnętrznego źródła.

Revalidacja na żądanie może być realizowana na kilka sposobów, w tym przez specjalne funkcje API dostarczane przez Next.js, takie jak revalidatePath i revalidateTag. Pozwalają one na dynamiczne wyzwalanie procesu revalidacji, co jest szczególnie użyteczne w aplikacjach dynamicznych i interaktywnych.

Przykład: Załóżmy, że mamy aplikację Next.js, która wykorzystuje dane z kolekcji produktów. Chcielibyśmy, aby dane te były rewalidowane natychmiast po dodaniu nowego produktu.

Krok 1: Fetch z tagiem cache

export default async function Page() {
	const res = await fetch("<https://api.example.com/products>", {
		next: { tags: ["products-collection"] },
	});
	const data = await res.json();
}
 

W powyższym przykładzie, zapytanie fetch oznaczone jest tagiem products-collection, co pozwala na łatwą identyfikację i grupowanie zapytań związanych z kolekcją produktów.

Krok 2: Revalidacja tagiem Gdy nowy produkt jest dodawany, chcemy, aby dane zostały natychmiast zrevalidowane. Możemy to zrobić, wyzwalając revalidację na żądanie z użyciem revalidateTag.

import { revalidateTag } from "next/cache";
 
export default async function addProduct(product) {
	// Logika dodawania produktu...
	// Po dodaniu produktu, wywołujemy revalidację:
	revalidateTag("products-collection");
}
 

W tym scenariuszu, gdy wywołana jest funkcja addProduct, po pomyślnym dodaniu produktu do kolekcji, wyzwalana jest revalidacja danych oznaczonych tagiem products-collection.

Route segment config

W Next.js, pliki route.ts, page.tsx, i layout.tsx mogą eksportować określone ustawienia, które wpływają na działanie danej strony lub API. Na przykład, aby zmienić środowisko wykonawcze na Edge zamiast domyślnego Node.js, stosujemy następującą deklarację:

export const runtime = "edge";

Opcje konfiguracyjne

dynamic: Ta opcja daje kontrolę nad tym, jak strona jest renderowana. Można wymusić dynamiczne lub statyczne zachowanie, co jest przydatne w różnych scenariuszach, np. przy tworzeniu stron o wysokiej interaktywności lub stron, które rzadko się zmieniają. Możliwe opcje to:

1. auto: zachowanie domyślne, dotychczas obserwowane.
2. force-dynamic: wyłącza cache; wszystkie zapytania fetch są pobierane za każdym razem, jak przy użyciu cache: 'no-store'.
3. error: wymusza statyczne renderowanie; użycie dynamicznych funkcji lub cache: 'no-store' kończy się błędem.
4. force-static: wymusza statyczne renderowanie; dynamiczne funkcje zwracają puste obiekty.

dynamicParams: Określa zachowanie w przypadku, gdy strona ma zdefiniowaną funkcję generateStaticParams, ale użytkownik odwiedza adres z parametrami niezawartymi w tej funkcji.

1. true: domyślne zachowanie; dynamiczne strony są generowane ad hoc.
2. false: jeśli parametr nie został zwrócony przez generateStaticParams, to odwiedzenie takiej podstrony skutkuje błędem 404.

revalidate: Modyfikuje domyślną wartość revalidate dla fetch na danej stronie.

1. false: zachowanie domyślne.
2. 0: wymusza dynamiczne pobieranie danych; działa jak cache: 'no-store'.
3. Dowolna inna liczba sekund (całkowita) jako wartość.

preferredRegion: Preferowany region wdrożenia; zależy od platformy hostingowej. Może być to string lub tablica, z domyślną wartością all.

fetchCache: Zaawansowane ustawienie umożliwiające dokładniejszą kontrolę nad działaniem cache dla fetch. Możliwe opcje to:

1. auto: zachowanie domyślne.
2. default-cache: zmienia domyślną opcję cache dla fetch na force-cache.
3. only-cache: zmienia domyślną opcję cache dla fetch na force-cache i zgłasza błąd przy próbie użycia innej wartości.
4. force-cache: nadpisuje opcję cache dla fetch na force-cache.
5. default-no-store: zmienia domyślną opcję cache dla fetch na no-store.
6. only-no-store: zmienia domyślną opcję cache dla fetch na no-store i zgłasza błąd przy próbie użycia innej wartości.
7. force-no-store: nadpisuje opcję cache dla fetch na no-store.

Podsumowanie

Pobieranie, cache'owanie i revalidacja danych w Next.js daje wiele możliwości optymalizacji i ulepszenia doświadczenia użytkownika. Zaprezentowane metody i przykłady kodu stanowią solidną podstawę do wykorzystania tych technik w praktyce.Jeśli chcesz dowiedzieć się, jak dalej przyspieszyć swoją stronę w Next.js, nie przegap naszego kolejnego wpisu Optymalizacje w Next.js - Jak przyspieszyć swoją stronę? Znajdziesz tam praktyczne porady i techniki, które pomogą Ci jeszcze bardziej poprawić wydajność Twojej aplikacji.

Często zadawane pytania

1. Czym jest Next.js i dlaczego jest używany do pobierania danych? Next.js to nowoczesny framework dla React, który usprawnia proces pobierania danych w aplikacjach internetowych. Używa rozszerzonej wersji fetch dla optymalizacji wydajności i responsywności aplikacji.
2. Jak Next.js ulepsza proces pobierania danych? Next.js wprowadza zaawansowane funkcje, takie jak automatyczne zapamiętywanie zapytań fetch i inteligentne zarządzanie cache, co zwiększa wydajność aplikacji i redukuje obciążenie serwerów.
3. Co to jest cache'owanie danych i jak jest realizowane w Next.js? Cache'owanie to przechowywanie danych w pamięci, aby uniknąć ich ponownego pobierania z zewnętrznych źródeł. Next.js automatycznie cache'uje wartości zwracane przez fetch, zwiększając wydajność aplikacji.
4. Jakie są metody rewalidacji danych w Next.js? Next.js oferuje dwie główne metody rewalidacji danych: czasową i na żądanie. Revalidacja czasowa odświeża dane automatycznie po określonym czasie, podczas gdy revalidacja na żądanie pozwala na natychmiastowe odświeżenie danych po określonych zdarzeniach.
5. Co to jest Route Segment Config w Next.js? Route Segment Config to zestaw ustawień w Next.js, które pozwalają na dostosowanie działania strony lub API. Można np. zmienić środowisko wykonawcze na Edge, kontrolować renderowanie strony, czy modyfikować zachowanie cache dla fetch.
6. Jakie są główne korzyści z wykorzystania Next.js do pobierania danych? Next.js oferuje zwiększoną wydajność dzięki lepszemu zarządzaniu pobieraniem danych, automatycznemu cache'owaniu i rewalidacji. Ulepsza to doświadczenie użytkownika poprzez szybsze ładowanie stron i aktualne informacje.
7. Czy istnieją jakieś zaawansowane ustawienia cache w Next.js? Tak, Next.js pozwala na zaawansowaną kontrolę nad cache'owaniem przez opcje takie jak default-cache, only-cache, force-cache i inne, umożliwiając precyzyjną konfigurację zachowania cache dla fetch.