Inertia.js pozwala zbudować pełne SPA w Laravelu bez tworzenia osobnego REST API. Kontrolery zwracają komponenty React, Vue lub Svelte z danymi zamiast widoków Blade, a Inertia obsługuje nawigację bez przeładowania strony. Efekt — jedno repozytorium, jeden deployment, naturalne uwierzytelnianie sesyjne i koszt utrzymania niższy o 30–50% niż przy klasycznym API plus SPA. To architektura, w której zbudowaliśmy OneCRMApp i FamilyTimelineApp.
Jak działa Inertia.js?
W klasycznym SPA frontend komunikuje się z backendem przez API — trzeba zaprojektować endpointy, uwierzytelnianie tokenowe, obsługę błędów i wersjonowanie kontraktu. Inertia usuwa tę warstwę. Kontroler Laravela zwraca nazwę komponentu strony i dane.
return Inertia::render('Orders/Index', [
'orders' => OrderResource::collection($orders),
'filters' => $request->only(['status', 'search']),
]);
Po stronie React komponent po prostu odbiera dane jako propsy.
export default function OrdersIndex({ orders, filters }) {
return (
<div>
<h1>Zamówienia</h1>
<OrdersTable rows={orders.data} initialFilters={filters} />
</div>
);
}
Kliknięcie linku Inertia przechwytuje po stronie przeglądarki i wykonuje żądanie XHR po JSON — serwer odpowiada komponentem i propsami, a przeglądarka podmienia stronę bez pełnego przeładowania. Routing pozostaje w Laravelu, historia przeglądarki działa normalnie, a formularze mają wbudowaną obsługę błędów walidacji.
Inertia.js czy klasyczne API plus SPA?
| Kryterium | Inertia.js | API + SPA |
|---|---|---|
| Repozytoria | Jedno | Dwa (backend i frontend) |
| Uwierzytelnianie | Sesja Laravela (proste) | Tokeny (Sanctum, OAuth) |
| Kontrakt API | Nie istnieje | Do zaprojektowania i wersjonowania |
| Deployment | Jeden | Dwa, z koordynacją wersji |
| Aplikacja mobilna | Nie obsłuży | Naturalne wsparcie |
| Koszt utrzymania | Niższy o 30–50% | Wyższy — dwa światy |
| Kiedy wybierać | Jeden klient (web), produkt SaaS | Mobile, wielu klientów, publiczne API |
W praktyce granica jest prosta. Dopóki aplikacja webowa jest jedynym klientem, Inertia daje wszystkie korzyści SPA bez kosztu warstwy API. Gdy pojawia się aplikacja mobilna albo publiczne API dla partnerów — wydzielasz API i wtedy ma ono realnego konsumenta, a nie hipotetycznego.
Wskazówka: Nie buduj API „na przyszłość". Buduj je, gdy pojawia się drugi klient. Przedwczesne API to najczęstszy sposób na podwojenie kosztu utrzymania aplikacji, która miała jednego odbiorcę — przeglądarkę.
Inertia.js z React — jak to wygląda w praktyce?
React jest najczęstszym wyborem z Inertią w naszych projektach. Kluczowe elementy, które dostajesz w standardzie
- Routing po stronie Laravela — trasy, middleware i uprawnienia działają jak w klasycznej aplikacji.
- Formularze z obsługą walidacji — komponent useForm wysyła dane i mapuje błędy Laravela na pola.
- Partial reloads — odświeżasz tylko wybrane propsy zamiast całej strony.
- Prefetching — Inertia może wstępnie pobierać strony przy najechaniu na link.
- Deferred props — ciężkie dane ładują się po pierwszym renderze, strona jest natychmiast interaktywna.
- TypeScript — pełne typowanie propsów po stronie React.
Po stronie Laravela zostają wszystkie zalety frameworka — Eloquent, walidacja, polityki dostępu, kolejki, testy feature. Pisząc testy, sprawdzasz odpowiedzi Inertii tak samo jak widoki Blade, więc testy automatyczne działają bez zmian.
SSR i SEO — czy SPA może być indeksowane?
Tak. Inertia obsługuje server-side rendering — komponenty React są renderowane do HTML na serwerze Node, a przeglądarka dostaje gotową stronę. Dla aplikacji z częścią publiczną (strony marketingowe, katalogi, portale) to warunek dobrego SEO i szybkiego pierwszego renderu.
Nasz standard dla projektów z publicznym ruchem to SSR plus klasyczne meta tagi i dane strukturalne generowane po stronie Laravela. Dzięki temu SPA nie musi być niewidoczne dla wyszukiwarek — a Core Web Vitals zostają pod kontrolą.
Kiedy Inertia.js to najlepszy wybór?
- Produkty SaaS — platformy z subskrypcjami, panelami i złożonym interfejsem.
- Portale klientów i aplikacje B2B — tam, gdzie liczy się płynność SPA, ale nie ma osobnego zespołu frontendowego.
- Zamiana starego interfejsu — modernizacja widoków Blade na SPA bez przepisywania backendu na API.
- MVP z ambicjami — start w jednym repozytorium, z możliwością wydzielenia API później.
Kiedy Inertia nie jest dobrym wyborem?
Gdy od pierwszego dnia potrzebujesz aplikacji mobilnej, publicznego API dla wielu partnerów albo frontend ma osobny zespół z własnym cyklem wydawniczym. Wtedy lepszy jest model React z Laravel — 3 sposoby połączenia oparty o API i Sanctum.
Ile kosztuje aplikacja SPA w Inertia.js?
Orientacyjnie, netto + VAT, przy stawce 90–160 zł/h
- Prosty produkt z 5–10 ekranami — 15 000–30 000 zł, 3–5 tygodni.
- Rozbudowany SaaS z rolami i panelem — 30 000–60 000 zł, 6–10 tygodni.
- Migracja istniejącej aplikacji Blade na Inertię — wyceniana po audycie, zwykle 2 000–8 000 zł za moduł.
Porównaj to z modelem API plus SPA, gdzie sama warstwa API i podwójny deployment dodają zwykle 20–40% do kosztu utrzymania. Szczegółowe widełki znajdziesz w artykule frontend dla aplikacji Laravel — jak wybrać.
Nasze produkty zbudowane w Inertia.js
Nie opisujemy teorii — tę architekturę rozwijamy produkcyjnie. OneCRMApp to CRM dla agentów ubezpieczeniowych zbudowany w Laravel 12, React i Inertia.js — z rolami, kalendarzem, rozliczeniami i raportami. FamilyTimelineApp to aplikacja rodzinna z tym samym stosem plus klient Android (Capacitor). Oba projekty pokazują, że Inertia sprawdza się w produktach z realnym ruchem i wieloletnim horyzontem rozwoju — przeczytaj case study CRM.
Najczęściej zadawane pytania
Czym jest Inertia.js w Laravelu?
Inertia.js to biblioteka, która łączy backend Laravela z komponentami React, Vue lub Svelte bez warstwy REST API. Kontrolery zwracają komponenty stron z danymi, a Inertia obsługuje nawigację SPA po stronie przeglądarki.
Czy Inertia.js to framework?
Nie w pełni — Inertia to „klej" między backendem a frontendem. Nie zastępuje Laravela ani Reacta; definiuje sposób, w jaki się komunikują. Routing, uwierzytelnianie i logika zostają po stronie frameworka backendowego.
Inertia.js czy Livewire?
Livewire jest prostszy i wystarcza do paneli wewnętrznych — piszesz wszystko w PHP. Inertia daje pełne SPA z React/Vue i sprawdza się w produktach z bogatym interfejsem. Częsty układ to Livewire dla panelu administracyjnego plus Inertia dla części produktowej.
Czy Inertia.js nadaje się dla dużych aplikacji?
Tak — przy zachowaniu dobrych praktyk: podział stron na komponenty, deferred props dla ciężkich danych, SSR dla części publicznej, cache i paginacja. Na Inertii działają produkty SaaS z tysiącami użytkowników, w tym nasze.
Czy SPA w Inertia.js jest widoczne dla Google?
Tak, przy włączonym SSR oraz poprawnych meta tagach i danych strukturalnych generowanych po stronie serwera. Bez SSR aplikacja nadal bywa indeksowana, ale SSR daje szybszy pierwszy render i lepsze Core Web Vitals.
Ile kosztuje wdrożenie Inertia.js w istniejącym projekcie?
Migracja widoków Blade na Inertię to zwykle 2 000–8 000 zł netto + VAT za moduł — zależnie od złożoności interfejsu. Backend, modele i uprawnienia zostają bez zmian, więc ryzyko jest znacznie mniejsze niż przy przepisywaniu na osobne API.
👉 Chcesz zbudować produkt SaaS w Laravel i React? Zobacz usługę Laravel Development albo programistę Laravel na zlecenie — wycena jest bezpłatna.
📖 Zobacz również: React z Laravel — 3 sposoby połączenia, frontend dla Laravel — jak wybrać oraz case study CRM w Laravel i React.