React z Laravelem można połączyć na trzy sposoby — przez Inertię (SPA bez API), przez Sanctum (SPA z sesją na API) albo przez czyste API headless. Każdy wzorzec ma inne zastosowanie: Inertia wygrywa w produktach webowych, Sanctum w aplikacjach z osobnym frontendem, a headless API — gdy klientów jest wielu (web, mobile, partnerzy). Koszt budowy zależy głównie od wybranego wzorca: Inertia obniża koszt utrzymania o 30–50% względem klasycznego API plus SPA.
Wzorzec 1 — Inertia.js, czyli SPA bez API
Najprostsza droga do nowoczesnego interfejsu w Laravelu. Kontrolery zwracają komponenty React z danymi, routing i uwierzytelnianie zostają w Laravelu, a nie ma żadnego REST API do projektowania.
- Uwierzytelnianie — sesja Laravela, jak w klasycznej aplikacji.
- Formularze — komponent useForm z automatycznym mapowaniem błędów walidacji.
- Deployment — jeden, wspólny dla backendu i frontendu.
- Kiedy wybierać — produkty SaaS, portale, aplikacje B2B z jednym klientem webowym.
Szczegółowy deep dive znajdziesz w artykule Inertia.js z Laravel i React — SPA bez osobnego API. To wzorzec, w którym zbudowaliśmy OneCRMApp i FamilyTimelineApp.
Wzorzec 2 — React SPA plus Laravel Sanctum
Frontend jako osobna aplikacja React (zwykle Vite lub Next.js), komunikująca się z API Laravela. Sanctum obsługuje uwierzytelnianie — w trybie SPA używa cookies i sesji, w trybie tokenowym kluczy API. To klasyczne podejście znane z dokumentacji Laravela.
- Uwierzytelnianie — Sanctum w trybie SPA (cookies, CSRF) lub tokeny dla klientów zewnętrznych.
- Kontrakt API — trzeba zaprojektować endpointy, zasoby (API Resources) i obsługę błędów.
- Deployment — dwa, wymagają koordynacji wersji frontendu i backendu.
- Kiedy wybierać — gdy frontend ma osobny zespół lub aplikacja ma wielu klientów.
Sanctum w trybie SPA jest niedoceniany — daje bezpieczne uwierzytelnianie sesyjne bez tokenów w localStorage i bez OAuth. Jeśli budujesz SPA z jednym backendem, to najbezpieczniejszy wariant.
Wzorzec 3 — Headless API dla wielu klientów
Laravel jako czyste API (REST lub GraphQL) bez żadnego frontendu w repozytorium. Klientami mogą być aplikacja React, aplikacja mobilna, integracje partnerów i automatyzacje. To największa elastyczność i najwyższy koszt utrzymania.
- Uwierzytelnianie — tokeny Sanctum, Passport (OAuth2) dla partnerów.
- Kontrakt API — wersjonowanie, dokumentacja OpenAPI, testy kontraktowe.
- Deployment — backend i każdy klient niezależnie.
- Kiedy wybierać — aplikacja mobilna w planach lub istniejąca, publiczne API dla partnerów, wiele kanałów.
Wskazówka: Kolejność decyzji, którą polecamy — zacznij od Inertii, wydziel API dopiero przy drugim kliencie. Przedwczesne headless API to najdroższy sposób budowania aplikacji, która ma jednego odbiorcę. API bez konsumentów to koszt bez wartości.
Porównanie trzech wzorców
| Kryterium | Inertia | Sanctum SPA | Headless API |
|---|---|---|---|
| Liczba repozytoriów | 1 | 2 | 2+ |
| Warstwa API | Brak | Tak | Tak, publiczna |
| Uwierzytelnianie | Sesja | Sesja/cookies | Tokeny |
| Aplikacja mobilna | Nie | Możliwa | Naturalna |
| Koszt utrzymania | Najniższy | Średni | Najwyższy |
| Czas do pierwszego wdrożenia | Najkrótszy | Średni | Najdłuższy |
TypeScript w projektach React plus Laravel
Niezależnie od wzorca, standardem w naszych projektach jest TypeScript. Typowanie propsów i odpowiedzi API redukuje błędy integracyjne, a generowane typy z OpenAPI lub zdefiniowane ręcznie kontrakty utrzymują spójność między backendem a frontendem. TypeScript podnosi też jakość rekrutacji — zespół dostaje jasny kontrakt zamiast dokumentacji, która się rozjeżdża.
Deployment i SSR
SPA z React wymaga decyzji o renderowaniu. Czysty client-side rendering jest najprostszy, ale gorszy dla SEO i pierwszego renderu. Server-side rendering (Next.js albo SSR Inertii) rozwiązuje oba problemy kosztem dodatkowego procesu Node w infrastrukturze.
W projektach z publicznym ruchem stosujemy SSR plus meta tagi i dane strukturalne generowane po stronie Laravela. To połączenie daje szybkie Core Web Vitals i pełną indeksowalność. Jak automatyzujemy deployment takich aplikacji, opisałem w artykule CI/CD i DevOps dla aplikacji Laravel.
Ile kosztuje projekt React plus Laravel?
Orientacyjnie, netto + VAT, przy stawce 90–160 zł/h
- Inertia + React (produkt 5–10 ekranów) — 15 000–30 000 zł.
- Sanctum SPA (frontend plus API) — 20 000–50 000 zł.
- Headless API plus React SPA — 25 000–70 000 zł.
- Do tego utrzymanie — w modelu API plus SPA wyższe o 20–40% względem Inertii.
Jak przygotować wymagania, żeby wycena była precyzyjna, opisaliśmy w artykule jak przygotować wymagania do wyceny aplikacji webowej.
Najczęściej zadawane pytania
Jak połączyć React z Laravel?
Na trzy sposoby. Najprostszy to Inertia.js — SPA bez osobnego API. Drugi to React SPA z uwierzytelnianiem Sanctum. Trzeci to czyste API headless plus aplikacja React. Wybór zależy od liczby klientów aplikacji i struktury zespołu.
React czy Inertia — co wybrać na start?
Dla aplikacji webowej z jednym klientem zacznij od Inertii — dostajesz SPA bez budowy i utrzymywania API. Osobne API wydziel wtedy, gdy pojawia się aplikacja mobilna albo publiczne API dla partnerów.
Czy Sanctum wystarczy do uwierzytelniania SPA?
Tak. Sanctum w trybie SPA używa sesji i cookies z ochroną CSRF — to bezpieczniejszy wariant niż tokeny przechowywane w localStorage. Tokeny Sanctum przydają się dla klientów zewnętrznych i integracji.
Czy SPA z React szkodzi SEO?
Bez SSR — może szkodzić, zwłaszcza w aplikacjach z treściami publicznymi. Z SSR i poprawnymi meta tagami SPA jest w pełni indeksowalne. Dla części publicznej warto rozważyć SSR albo osobne statyczne strony.
Ile kosztuje aplikacja React z Laravel?
W zależności od wzorca — od 15 000 zł (Inertia) przez 20 000–50 000 zł (Sanctum SPA) do 25 000–70 000 zł (headless API plus SPA). Koszt utrzymania jest najniższy przy Inertii, najwyższy przy pełnym rozdzieleniu na dwa systemy.
Czy React może współistnieć z Blade w jednym projekcie?
Tak — to częsty scenariusz migracji. Część stron zostaje w Blade, nowe moduły powstają w Inertii lub React, a aplikacja działa spójnie. Migracja modułami jest bezpieczniejsza niż przepisywanie całości naraz.
👉 Potrzebujesz aplikacji React z backendem Laravel? Sprawdź usługę Laravel Development albo programistę Laravel na zlecenie — wycena jest bezpłatna.
📖 Zobacz również: Inertia.js z Laravel i React, frontend dla Laravel — jak wybrać oraz CI/CD i DevOps dla aplikacji Laravel.