Inertia.js v2 — deferred props, prefetching i polling [2026]

Inertia.js v2 domknęła większość odczuwalnej luki między aplikacją Inertia a klasycznym SPA pobierającym dane po stronie klienta. Deferred props, prefetching, polling i infinite scroll — funkcje, które kiedyś wymagały ręcznie pisanych maszyn stanu — są teraz obywatelami pierwszej kategorii, sterowanymi z serwera. Oto jak każda z nich działa w praktyce i co zmienia dla użytkownika.

Jeśli dopiero poznajesz samą architekturę, zacznij od Inertia.js z Laravel i React — SPA bez osobnego API.

Deferred props — szybki pierwszy render, ciężkie dane później

Dashboard zwykle miesza lekkie dane (użytkownik, liczniki, uprawnienia) z ciężkimi zapytaniami (wykresy, agregaty, feed aktywności). Deferred props dzielą odpowiedź na dwie części: strona renderuje się od razu z lekkimi danymi, a ciężkie propsy przychodzą drugim żądaniem.

// Laravel — ciężki prop jest odroczony
return Inertia::render('Dashboard', [
    'stats' => fn () => StatsService::summary($user),
    'revenueChart' => Inertia::defer(fn () => RevenueService::monthly($user)),
]);

Po stronie React komponent pokazuje szkielet, dopóki dane nie dotrą

import { Deferred } from '@inertiajs/react';

export default function Dashboard({ stats, revenueChart }) {
    return (
        <div>
            <StatCards data={stats} />
            <Deferred data="revenueChart" fallback={<ChartSkeleton />}>
                <RevenueChart data={revenueChart} />
            </Deferred>
        </div>
    );
}

Używaj tego do wszystkiego, co może dotrzeć pół sekundy później bez łamania zrozumiałości strony. W połączeniu z SSR działa to wyjątkowo dobrze: serwer wysyła pełny HTML lekkich danych, a ciężkie widgety hydratują się w miarę docierania — patrz Inertia.js SSR w Laravel.

Prefetching — natychmiastowa nawigacja

<Link href="/orders" prefetch>Zamówienia</Link>

Przy najechaniu (albo przy montowaniu, jeśli wolisz) Inertia pobiera docelową stronę w tle. Gdy użytkownik klika, odpowiedź siedzi już w cache i strona podmienia się natychmiast. W naszych aplikacjach prefetchujemy dwa–trzy cele, do których każdy użytkownik i tak trafi: strony szczegółów z list, główny dashboard, najczęściej używany raport.

Wskazówka: Prefetchuj wybiórczo. Prefetching wszystkich linków zamienia czas bezczynności w obciążenie serwera; pobieraj prawdopodobny następny krok, nie całe menu nawigacji.

Polling — dane na żywo bez WebSocketów

import { usePoll } from '@inertiajs/react';

// odświeżaj tylko prop 'stats' co 5 sekund
usePoll(5000, { only: ['stats'] });

Polling z only odświeża tylko wskazane propsy, nie całą stronę — runda zostaje mała. Dla kolejek zadań, statusów dostaw i liczników KPI zastępuje cały stack WebSocketowy. Po prawdziwy real-time sięgaj dopiero, gdy aktualizacje muszą być subsekundowe albo współdzielone między użytkownikami.

Infinite scroll i scalanie propsów

import { router } from '@inertiajs/react';

// dołącz kolejną stronę zamiast podmieniać prop
router.reload({ only: ['orders'], data: { page: nextPage } });

Ze scalaniem propsów lista zachowuje to, co już wyrenderowane, i dokłada kolejne strony — klasyczny infinite scroll napędzany paginacją po stronie serwera i query builderem Laravela, zamiast warstwy danych po stronie klienta.

Aktualizacje optymistyczne

v2 pozwala też zaktualizować UI, zanim serwer potwierdzi operację. W połączeniu z optymistycznymi wizytami polubienia, checkboxy zadań i przeciąganie na kanbanie działają natychmiast, a Laravel przetwarza żądanie w tle — z automatycznym wycofaniem, jeśli żądanie się nie powiedzie.

Co to znaczy dla aplikacji

• Wspólny mianownik: każda z tych funkcji przenosi kawałek odczuwalnej wydajności z JavaScriptu klienta do modelu strony sterowanego serwerowo. Dostajesz responsywność SPA bez warstwy API, bez cache po stronie klienta do unieważniania i z Laravelem jako jednym źródłem prawdy. Nasz produkcyjny standard — używany w OneCRMApp i portalach klienckich — to deferred props, wybiórczy prefetching i polling domyślnie.

Chcesz taki profil wydajności w swoim produkcie?

Zobacz tworzenie aplikacji Laravel.

FAQ

Deferred props a lazy loading?

Deferred props dzielą odpowiedź strony na dwie fazy, żeby layout malował się od razu; lazy loading dotyczy zwykle zasobów poniżej zgięcia. Różne narzędzia do różnych wąskich gardeł.

Czy prefetching obciąża serwer?

To to samo żądanie, które wysłałby klik — wysłane przy najechaniu i zcache'owane. Obciążenie przesuwa się wcześniej, a nie rośnie.

Polling zamiast WebSocketów?

Dla dashboardów, liczników i statusów zadań — tak, odpytywanie co kilka sekund jest prostsze i wystarczające. Do czatu i obecności — WebSockety.

👉 Chcesz aplikację Inertia.js, która działa natychmiast? Zobacz tworzenie aplikacji Laravel albo programista Laravel na zlecenie.

📖 Czytaj dalej: Inertia.js z Laravel i React, Inertia.js SSR w Laravel i formularze i walidacja z useForm.