SPA (Single Page Application)

SPA je moderní přístup k tvorbě webů, který eliminuje neustálé „problikávání“ obrazovky při klikání na odkazy. Veškerý potřebný kód (HTML, JavaScript a CSS) se buď načte hned na začátku, nebo se příslušné části stahují dynamicky podle potřeby.

1. Jak SPA funguje?

V tradičním webu (Multi-Page Application) server při každém kliknutí vygeneruje a pošle celou novou stránku. V SPA se po prvním načtení stane následující:

1. **Uživatel klikne na odkaz:** Prohlížeč nepošle požadavek na novou stránku.
2. **JavaScript zasáhne:** Kód aplikace (např. v [[it_encyklopedie:react|Reactu]] nebo [[it_encyklopedie:vue|Vue]]) zachytí kliknutí.
3. **Změna URL:** Adresa v prohlížeči se změní pomocí tzv. //History API//, aby fungovalo tlačítko "Zpět".
4. **Aktualizace obsahu:** JavaScript stáhne pouze data (obvykle ve formátu JSON) a překreslí jen tu část stránky, která se má změnit.

2. Výhody SPA

Rychlost a plynulost: Po počátečním načtení jsou reakce webu bleskové. Přechody mezi sekcemi jsou okamžité.
Ukládání do mezipaměti: SPA mohou efektivně ukládat lokální data, což umožňuje aplikaci částečně fungovat i při výpadku internetu.
Sdílení logiky: Pokud máte mobilní aplikaci i web, obě mohou využívat stejné serverové rozhraní (API) pro získávání dat.
Bohaté UI: Umožňuje snadnou implementaci složitých animací a přechodových efektů.

3. Nevýhody a výzvy

SEO (Optimalizace): Protože je obsah generován JavaScriptem na straně klienta (CSR), vyhledávače mohou mít problém s jeho indexací (řeší se pomocí SSR).
První načtení: „Balík“ JavaScriptu může být velký, takže první zobrazení webu může trvat déle.
Paměťová náročnost: Dlouho otevřená SPA může spotřebovávat hodně paměti RAM, protože prohlížeč neustále drží stav aplikace.

4. Srovnání: SPA vs. MPA

Vlastnost	SPA (Single Page)	MPA (Multi-Page)
Načítání	Pouze jednou na začátku.	Při každé navigaci.
Uživatelský zážitek	Plynulý, jako aplikace.	Tradiční, s překreslováním.
Příklad	Gmail, Facebook, Trello.	Wikipedia, e-shopy, blogy.
Vývoj	Náročnější na logiku klienta.	Jednodušší na straně prohlížeče.

[Image comparison of network requests in SPA vs traditional web application]

5. Technologie pro tvorbu SPA

Dnešní trh ovládají tři hlavní ekosystémy:

React: Flexibilní knihovna od Meta.
Vue.js: Progresivní a velmi čitelný framework.
Angular: Komplexní platforma od Google vhodná pro velké korporátní systémy.

Zajímavost: Koncept SPA proslavil Gmail v roce 2004. Tehdy bylo naprosto revoluční, že jste mohli procházet e-maily a psát zprávy, aniž by se pokaždé znovu načítala celá lišta s menu a logem.

Zpět na Architekturu