====== 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í ([[it_encyklopedie:api|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 ([[it_encyklopedie:csr|CSR]]), vyhledávače mohou mít problém s jeho indexací (řeší se pomocí [[it_encyklopedie:ssr|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:
  * **[[it_encyklopedie:react|React]]:** Flexibilní knihovna od Meta.
  * **[[it_encyklopedie:vue|Vue.js]]:** Progresivní a velmi čitelný framework.
  * **[[it_encyklopedie:angular|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.

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]