Asttero

Pobieranie danych w Next.js - Przewodnik dla początkujących

Next.js Opublikowano 11 maja 2026 Zaktualizowano 15 czerwca 2026 9 min
Pobieranie danych w Next.js - Przewodnik dla początkujących

Tradycyjne podejście do budowania sklepów internetowych często wiąże się z kompromisami między elastycznością a szybkością działania. Nowoczesny e-commerce wymaga jednak technologii, która eliminuje opóźnienia i pozwala na błyskawiczne renderowanie oferty. Pobieranie danych w Next.js, zwłaszcza od momentu wprowadzenia architektury App Router, redefiniuje sposób, w jaki pobieramy i prezentujemy dane użytkownikom. Zrozumienie tych mechanizmów to pierwszy krok do stworzenia wydajnego sklepu w modelu headless. Wyjaśniamy, jak skutecznie i bezpiecznie pobierać dane w Next.js, łącząc teorię z praktycznymi przykładami dla e-commerce.

Pobieranie danych w Next.js - Przewodnik dla początkujących

Nowa era pobierania danych: Dlaczego Next.js App Router zmienia zasady gry

Wprowadzenie App Routera w Next.js przyniosło fundamentalną zmianę w architekturze aplikacji webowych. Najważniejszą innowacją jest to, że wszystkie komponenty wewnątrz katalogu app są domyślnie traktowane jako Server Components. Oznacza to, że ich kod wykonuje się bezpośrednio na serwerze, a do przeglądarki użytkownika trafia gotowy, wyrenderowany kod HTML oraz minimalna ilość kodu JavaScript. Pobieranie danych w Next.js zyskało zupełnie nowy wymiar wraz z upowszechnieniem Server Components.

Dla wydajności sklepu internetowego ma to kolosalne znaczenie. Tradycyjne aplikacje React zmuszają przeglądarkę do pobrania dużych paczek kodu, uruchomienia skryptów, a dopiero potem do wysłania zapytań do API po dane produktów czy ceny. W Next.js ten proces zostaje przeniesiony na serwer. Pobieranie danych odbywa się blisko bazy danych lub API platformy e-commerce, co drastycznie skraca czas oczekiwania na wyświetlenie oferty.

Projektując nowoczesny sklep, warto od początku rozróżnić zadania wykonywane po stronie użytkownika od tych realizowanych na serwerze. Pomaga w tym podział na Server i Client Components w Next.js, który pozwala zoptymalizować zużycie zasobów. Ta ewolucja rozpoczęła się wraz z nowościami w Next.js 13, kiedy wprowadzono nowy system katalogów i zrezygnowano z dotychczasowego Pages Routera. Dzięki temu deweloperzy zyskali potężne narzędzie do optymalizacji ścieżki zakupowej.

Pobieranie danych po stronie serwera (Server Components) w praktyce

Pobieranie danych w Next.js na poziomie serwera eliminuje potrzebę stosowania skomplikowanych stanów ładowania i hooków, które były standardem w klasycznym React. Kod staje się prostszy, bardziej czytelny i łatwiejszy w utrzymaniu.

Jak wygląda podstawowe zapytanie fetch na serwerze?

W App Routerze komponent serwerowy może być po prostu funkcją asynchroniczną. Pozwala to na użycie słów kluczowych async oraz await bezpośrednio w ciele komponentu. Next.js rozszerza natywne API fetch przeglądarki, co oznacza, że nie musisz instalować dodatkowych bibliotek, aby zarządzać zapytaniami na serwerze.

Oto przykład prostego komponentu pobierającego listę produktów z zewnętrznego API:


async function getProducts() {

const res = await fetch('https://api.example.com/products');

if (!res.ok) {

throw new Error('Błąd podczas pobierania danych');

}

return res.json();

}

export default async function ProductsPage() {

const products = await getProducts();

return (

<div>

<h1>Nasze Produkty</h1>

<ul>

{products.map((product) => (

<li key={product.id}>{product.name}</li>

))}

</ul>

</div>

);

}

Bezpieczeństwo kluczy API i pakiet server-only

Podczas integracji sklepu z zewnętrznymi systemami, takimi jak Shopify Storefront API, musisz korzystać z prywatnych tokenów dostępowych. W tradycyjnych aplikacjach klienckich istniało ryzyko, że te klucze wyciekną do przeglądarki użytkownika. W Next.js pobieranie danych na serwerze całkowicie rozwiązuje ten problem.

Aby zagwarantować bezpieczeństwo, tokeny przechowuj w zmiennych środowiskowych bez przedrostka NEXT_PUBLIC. Zmienne bez tego przedrostka są niedostępne dla kodu klienckiego. Dodatkowo warto zabezpieczyć kod przed przypadkowym zaimportowaniem modułów serwerowych do komponentów klienckich. Służy do tego pakiet server-only. Po jego zainstalowaniu i dodaniu importu na początku pliku, próba użycia tego kodu w przeglądarce zakończy się błędem budowania aplikacji:


import 'server-only';

export async function fetchShopifyData(query, variables) {

const res = await fetch('https://your-store.myshopify.com/api/2024-04/graphql.json', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,

},

body: JSON.stringify({ query, variables }),

});

return res.json();

}

Taka architektura pozwala na bezpieczne budowanie zaawansowanych integracji i dedykowanych aplikacji Shopify, które przetwarzają wrażliwe dane bez obaw o ich ujawnienie na frontendzie.

Rewolucja w cache'owaniu: Różnice między Next.js 14 a Next.js 15

Zarządzanie pamięcią podręczną (cache) to kluczowy element optymalizacji każdego sklepu internetowego. Szybkie serwowanie statycznych kart produktów przy jednoczesnym dbaniu o aktualność cen i stanów magazynowych wymaga precyzyjnej konfiguracji. W tym obszarze między wersją 14 a 15 frameworku Next.js zaszła bardzo ważna zmiana.

W Next.js 13 oraz 14 zapytania fetch były domyślnie cache'owane. Oznaczało to, że framework automatycznie zapisywał odpowiedzi z API i serwował je jako statyczne zasoby (zachowanie force-cache). Choć przyspieszało to działanie sklepu, często prowadziło do problemów z wyświetlaniem nieaktualnych danych, jeśli deweloper zapomniał o konfiguracji rewalidacji.

W Next.js 15 domyślne zachowanie zostało zmienione. Zapytania fetch nie są już domyślnie zapisywane w pamięci podręcznej (zachowanie no-store). Framework działa teraz w sposób tożsamy ze standardowym zachowaniem przeglądarek. Jeśli chcesz, aby dane były cache'owane, musisz to jawnie skonfigurować w opcjach zapytania.

Do zarządzania aktualnością danych służą dwa podejścia:

Przykład konfiguracji cache i rewalidacji czasowej w Next.js 15:


// Dane będą cache'owane przez maksymalnie 3600 sekund (1 godzina)

const res = await fetch('https://api.example.com/products', {

next: { revalidate: 3600 }

});

Kiedy zejść na klienta? Pobieranie danych po stronie przeglądarki

Mimo ogromnych zalet renderowania po stronie serwera, pobieranie danych w Next.js może również odbywać się bezpośrednio w przeglądarce użytkownika. Dotyczy to wszystkich elementów interaktywnych, które zależą od natychmiastowych akcji klienta lub wymagają personalizacji w czasie rzeczywistym.

Komponenty klienckie musisz oznaczyć dyrektywą "use client" na samej górze pliku. Typowe scenariusze, w których pobieranie danych w przeglądarce jest niezbędne, to:

Do pobierania danych w przeglądarce nie rekomendujemy surowego hooka useEffect, ponieważ łatwo w nim o błędy związane z wyciekami pamięci czy zbędnymi renderami. Zamiast tego warto wdrożyć dedykowane biblioteki, takie jak SWR (stworzona przez twórców Next.js) lub TanStack Query. Oferują one automatyczne cache'owanie, ponawianie nieudanych zapytań oraz błyskawiczne aktualizowanie interfejsu użytkownika.

Płynne ładowanie strony: Obsługa stanów oczekiwania i błędów

Użytkownicy e-commerce nie lubią czekać na załadowanie oferty. Jeśli proces ten trwa zbyt długo, po prostu opuszczają sklep. Next.js oferuje wbudowane mechanizmy, które pozwalają na płynne zarządzanie asynchronicznością i poprawiają postrzeganą szybkość działania witryny.

Stosowanie tych rozwiązań ma ogromny wpływ na strukturę i organizację routingu w Next.js, gdzie każdy segment ścieżki może niezależnie zarządzać swoimi stanami ładowania i błędów.

Wydajność na najwyższym poziomie: Jak wyeliminować efekt waterfall

Podczas projektowania zapytań do API łatwo wpaść w pułapkę sekwencyjnego pobierania danych, znaną jako efekt waterfall (wodospad). Zjawisko to występuje wtedy, gdy jedno zapytanie czeka na zakończenie poprzedniego, mimo że dane te nie są od siebie bezpośrednio zależne.

Wyobraź sobie kartę produktu, na której musisz wyświetlić szczegóły przedmiotu, opinie klientów oraz listę powiązanych produktów. Jeśli pobierzesz te dane w sposób sekwencyjny:


// ZŁY WZORZEC - zapytania blokują się nawzajem

const product = await getProduct(id);

const reviews = await getReviews(id); // czeka na getProduct

const related = await getRelatedProducts(id); // czeka na getReviews

Czas ładowania oferty będzie sumą czasów wszystkich trzech zapytań. Aby temu zapobiec, warto inicjować zapytania równolegle. W Next.js najprostszym rozwiązaniem jest użycie Promise.all:


// DOBRY WZORZEC - zapytania wykonują się równolegle

const productPromise = getProduct(id);

const reviewsPromise = getReviews(id);

const relatedPromise = getRelatedProducts(id);

const [product, reviews, related] = await Promise.all([

productPromise,

reviewsPromise,

relatedPromise

]);

Dzięki temu przeglądarka otrzyma komplet danych znacznie szybciej, co bezpośrednio przełoży się na lepsze wskaźniki wydajności i wyższy komfort zakupów.

Next.js i Shopify: Fundament szybkiego sklepu headless

Wybór odpowiedniej architektury technologicznej ma bezpośredni wpływ na rentowność biznesu online. Szybkość ładowania sklepu i płynność przechodzenia między krokami w koszyku to czynniki, które bezpośrednio kształtują wskaźnik konwersji (CVR) oraz średnią wartość zamówienia (AOV).

Połączenie elastyczności Next.js z niezawodnością Shopify w modelu headless pozwala na stworzenie sklepu pozbawionego ograniczeń tradycyjnych szablonów. Prawidłowe pobieranie danych w Next.js oraz optymalizacja zapytań do Shopify Storefront API gwarantują, że sklep zachowa stabilność nawet podczas nagłych pików sprzedażowych, takich jak Black Friday.

Decydując się na taki krok, zyskujesz pełną kontrolę nad prezentacją oferty i szybkością działania witryny. Jeśli chcesz dowiedzieć się więcej o korzyściach płynących z takiego rozwiązania, warto poznać korzyści headless e-commerce. Jako oficjalny partner Shopify wspieramy marki w przejściu na nowoczesne technologie. Jeśli planujesz rozwój swojego biznesu i interesuje Cię profesjonalne wdrożenie sklepu Shopify w architekturze headless, skontaktuj się z nami, aby omówić szczegóły projektu.

FAQ

Czy w Next.js App Router muszę używać zewnętrznych bibliotek do pobierania danych na serwerze?

Nie, nie jest to konieczne. Next.js rozszerza natywne API fetch o zaawansowane opcje cache'owania i rewalidacji, co sprawia, że standardowe zapytania są w pełni wystarczające i wydajne w Server Components.

Jak zabezpieczyć tokeny Shopify Storefront API przed wyciekiem do przeglądarki?

Tokeny przechowuj w zmiennych środowiskowych bez przedrostka NEXT_PUBLIC. Dodatkowo warto zastosować pakiet 'server-only', który uniemożliwi przypadkowe uruchomienie kodu pobierającego dane w przeglądarce.

Dlaczego moje zapytania fetch w Next.js 15 nie zapisują się w pamięci podręcznej?

W Next.js 15 domyślne zachowanie cache'owania zostało zmienione z force-cache na no-store. Aby dane były cache'owane, warto jawnie przekazać odpowiednie parametry w opcjach konfiguracji fetch, np. określając czas rewalidacji.

Czym różni się rewalidacja danych na żądanie od rewalidacji czasowej?

Rewalidacja czasowa automatycznie odświeża dane po określonej liczbie sekund. Rewalidacja na żądanie pozwala na natychmiastowe wyczyszczenie pamięci podręcznej za pomocą tagu lub ścieżki, na przykład po aktualizacji ceny produktu w panelu Shopify.

Czy mogę pobierać dane w przeglądarce w Next.js?

Tak, jest to wskazane przy elementach interaktywnych, takich jak filtry czy koszyk. Wymaga to oznaczenia komponentu dyrektywą 'use client' i użycia bibliotek takich jak SWR lub TanStack Query.

Co to jest efekt waterfall i jak go uniknąć?

Efekt waterfall to sekwencyjne pobieranie danych, gdzie jedno zapytanie czeka na zakończenie poprzedniego. Można go uniknąć, inicjując niezależne zapytania równolegle za pomocą Promise.all.

Bibliografia