SPA

SPA (Single-Page Application) to aplikacja webowa, która ładuje jeden dokument HTML, a potem aktualizuje jego zawartość dynamicznie, bez pełnego przeładowania strony przy każdym kliknięciu. Zamiast prosić serwer o nowy dokument za każdym razem, gdy zmieniasz widok, SPA pobiera tylko potrzebne dane (najczęściej w JSON przez API) i przerysowuje fragment interfejsu w przeglądarce. Efekt: nawigacja jest płynna i przypomina działanie aplikacji desktopowej czy mobilnej, bez charakterystycznego „mignięcia” białej strony.

Jak to działa

Po pierwszym wejściu przeglądarka pobiera szkielet HTML plus paczkę JavaScriptu (tzw. bundle). Od tego momentu pałeczkę przejmuje kod po stronie klienta: router przechwytuje zmiany adresu URL (przez History API, np. history.pushState), a framework decyduje, który komponent wyrenderować. Dane dociągasz asynchronicznie przez fetch lub bibliotekę typu Axios i wstrzykujesz je do widoku.

SPA sprawdza się tam, gdzie użytkownik dużo klika i pracuje w obrębie jednej „przestrzeni”: panele administracyjne, dashboardy, edytory, aplikacje typu Gmail czy Trello. Mniej pasuje do prostych stron contentowych, gdzie liczy się szybki pierwszy render i SEO.

Przykład z praktyki

Najszybciej zobaczysz to z Reactem i Vite. Odpalasz projekt komendą:

npm create vite@latest moja-apka -- --template react

Dostajesz jeden plik index.html z pustym

, a całą resztę dorysowuje JavaScript. Dodajesz react-router-dom, definiujesz trasy i klikając w menu zmieniasz widoki bez przeładowania. W zakładce Network w DevTools zobaczysz, że po pierwszym ładowaniu lecą już tylko zapytania do API, a nie kolejne dokumenty HTML.

Na co uważać

Kilka pułapek, które łapią juniorów:

• SEO i pierwszy render. Goły SPA serwuje pustą stronę, którą dopiero wypełnia JS. Dlatego do stron publicznych częściej sięga się po SSR (Server-Side Rendering) albo frameworki jak Next.js czy Nuxt.
• Rozmiar bundle’a. Im więcej kodu, tym dłużej trwa start. Ratuje cię code splitting i lazy loading.
• Routing na serwerze. Jeśli odświeżysz /profil, serwer musi i tak oddać index.html, inaczej dostaniesz 404. To klasyczny błąd przy wdrożeniu.

Mit do obalenia: SPA nie jest „lepsze” od klasycznej strony z założenia. To kompromis — kupujesz płynność interfejsu kosztem cięższego startu i większej złożoności.

Pojęcia powiązane

SSR, CSR (Client-Side Rendering), SSG, REST API, React, Vue, Angular, PWA, History API, hydration.