Server Components, Islands, HTMX — dokąd zmierza frontend

Po dekadzie dominacji SPA (Single Page Applications) frontend wraca do serwera — ale w nowy, ciekawszy sposób. Server Components, Islands Architecture, HTMX i Livewire to różne odpowiedzi na to samo pytanie: jak mieć interaktywność bez gigantycznych bundli JavaScript.

Problem ze „starym" SPA

• Ogromne pierwsze ładowanie (często 1-2 MB JS przed pierwszym renderem)
• Słabe SEO bez SSR
• Niepotrzebny stan po stronie klienta dla treści statycznych
• Skomplikowana hydratacja po SSR

React Server Components (Next.js)

Komponenty renderowane wyłącznie na serwerze, bez wysyłania ich kodu do klienta. Klient otrzymuje finalny HTML, a JavaScript trafia tylko tam, gdzie naprawdę jest interakcja (oznaczone "use client").

• Plusy: minimalne bundle, świetne SEO, znajomy React
• Minusy: krzywa uczenia jest nietrywialna, łatwo zrobić błędy granicy serwer/klient

Astro Islands

Cała strona jest statycznym HTML. Tylko wskazane „wyspy" (np. koszyk, formularz) są hydratowane — i to wyłącznie tam, gdzie wymagana interakcja.

• Plusy: najmniej JS w finalnym buildzie, agnostyczne (React/Vue/Svelte w jednej aplikacji)
• Minusy: słabe dla aplikacji wysoce interaktywnych (dashboardy)

HTMX

Powrót do server-side rendering, ale z fragmentem HTML zwracanym przez AJAX i wstrzykiwanym do DOM. Bez JavaScript pisanego ręcznie po stronie klienta.

• Plusy: ekstremalnie prosty, działa z każdym backendem, mała powierzchnia ataku
• Minusy: brak złożonej interaktywności po stronie klienta, „magia" atrybutów

Laravel Livewire

Polski odpowiednik HTMX w świecie Laravela — komponenty PHP z automatyczną synchronizacją stanu przez AJAX. Idealne dla zespołów PHP-first.

• Plusy: Blade + PHP = jedna technologia stackowo, Filament zbudowany na tym
• Minusy: jeden request na każde działanie (chyba że łączysz z Alpine.js)

Co wybrać?

• Aplikacja contentowa (blog, landing, e-commerce): Astro lub Laravel + Livewire
• Aplikacja highly interactive (dashboard, edytor): Next.js + Server Components
• Mała aplikacja na istniejącym backendzie: HTMX lub Livewire
• Stara aplikacja, którą chcesz delikatnie ulepszyć: HTMX + Alpine.js

Wniosek

SPA nie umarły — nadal mają sens dla niektórych aplikacji. Ale przestały być domyślną odpowiedzią na pytanie „jak zbudować frontend". W większości projektów lepiej zacząć od server-side i dodać interaktywność tam, gdzie naprawdę potrzeba.