Zkratka proSingle Page ApplicationTakésingle-page app, SPA aplikacePokročilý
Definice
Single Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.
Proč Single Page Application nepřekresluje celou stránku
Single Page Application přesune část práce, kterou by dříve dělal server při každém kliknutí, do JavaScriptu v prohlížeči. Server obvykle pošle základní HTML, balík skriptů a statická aktiva. Další obrazovky se skládají z komponent a dat načtených přes API, ne z nově poslaného dokumentu.
Výsledek působí svižně hlavně u nástrojů, kde uživatel mnoho minut pracuje v jedné relaci: administrace, dashboard, editor, e-mailový klient nebo mapová aplikace. První načtení však může být těžší než u běžné serverové stránky, protože prohlížeč musí stáhnout, spustit a často i inicializovat větší JavaScript.
Průběh navigace bez nového dokumentu
Router v aplikaci sleduje změny adresy pomocí History API. Kliknutí na interní odkaz nezpůsobí plný reload, ale změnu stavu aplikace. Komponenta pro danou cestu si vyžádá data, vykreslí nový pohled a případně aktualizuje titulek, metadata a stav formulářů.
const goToOrder = async (id) => {
history.pushState(null, "", `/orders/${id}`);
const res = await fetch(`/api/orders/${id}`);
renderOrder(await res.json());
};Server přesto nesmí být jen skladištěm souborů. Přímý vstup na adresu /orders/42 musí vrátit aplikaci, která umí stejnou cestu zpracovat. Produkční nasazení proto řeší fallback na hlavní dokument, cache statických souborů, autentizaci a chyby API.
SEO, výkon a hranice modelu
Vyhledávače dnes JavaScript zpracovat umějí, ale rendering v prohlížeči stále přidává riziko: obsah může být dostupný pozdě, metadata se mohou měnit až po spuštění skriptu a sdílení odkazu může ukázat chudý náhled. Veřejné katalogy, magazíny a e-shopy proto často volí server-side rendering, statické generování nebo hybridní framework jako Next.js místo čisté SPA.
Single Page Application také klade důraz na stav aplikace. Chybně navržený stav vede k rozbitým tlačítkům zpět, ztraceným formulářům nebo různým datům ve více částech obrazovky. Pro použití bez instalace a s offline schopnostmi může být blízkým pojmem Progressive Web App, ale PWA není totéž co SPA.
Příklady ze skutečných projektů
Interní dashboard pro podporu
Operátor zákaznické podpory otevře dashboard ráno a během směny přepíná mezi tikety, historií objednávek a poznámkami. SPA po prvním načtení mění jen datové části obrazovky, takže práce nepůsobí jako série nových stránek. Pokud API zpomalí, rozhraní může ukázat skeleton nebo lokální stav místo prázdné stránky.
Produktový web s požadavkem na organickou návštěvnost
Tým postaví marketingový web jako čistou SPA a obsah produktových stránek se objeví až po dotazu z prohlížeče. Sdílený odkaz má horší náhled a některé stránky se ve výsledcích vyhledávání objevují pomaleji. Přechod na předrenderování nebo server-side rendering zachová interaktivitu, ale dodá vyhledávači hotové HTML.
Příklady z praxe
Interní dashboard pro podporu
Operátor zákaznické podpory otevře dashboard ráno a během směny přepíná mezi tikety, historií objednávek a poznámkami. SPA po prvním načtení mění jen datové části obrazovky, takže práce nepůsobí jako série nových stránek. Pokud API zpomalí, rozhraní může ukázat skeleton nebo lokální stav místo prázdné stránky.
Produktový web s požadavkem na organickou návštěvnost
Tým postaví marketingový web jako čistou SPA a obsah produktových stránek se objeví až po dotazu z prohlížeče. Sdílený odkaz má horší náhled a některé stránky se ve výsledcích vyhledávání objevují pomaleji. Přechod na předrenderování nebo server-side rendering zachová interaktivitu, ale dodá vyhledávači hotové HTML.
Časté omyly
- MýtusSPA je vždycky rychlejší než klasický web.
- Ve skutečnostiSingle Page Application může být velmi rychlá po načtení, ale první návštěva může být pomalejší kvůli většímu JavaScriptu. Skutečný výkon závisí na velikosti balíků, strategii načítání dat, cache a zařízení uživatele.
- MýtusU SPA už backend nepotřebujeme.
- Ve skutečnostiSingle Page Application přesouvá vykreslování rozhraní do prohlížeče, ale backend obvykle dál poskytuje API, autentizaci, autorizaci, ukládání dat a validaci. Citlivá pravidla nepatří jen do klientského kódu.
Časté dotazy
- Je Single Page Application vhodná pro veřejný e-shop?
- Single Page Application může fungovat pro e-shopovou administraci, košík nebo přihlášenou zákaznickou sekci. Veřejný katalog produktů ale často potřebuje rychlé první zobrazení, stabilní metadata, sdílení odkazů a spolehlivé indexování. Pro takovou část e-shopu bývá vhodnější server-side rendering, statické generování nebo hybridní řešení, které pošle hotové HTML a teprve potom přidá interaktivitu v prohlížeči.
- Co musí server vracet při přímém otevření URL ve SPA?
- Server u Single Page Application musí umět vrátit vstupní HTML i pro vnitřní adresy aplikace, například pro detail objednávky nebo profil uživatele. Bez tohoto nastavení funguje klikání uvnitř aplikace, ale obnovení stránky nebo přímé otevření odkazu skončí chybou 404. Backend zároveň dál řeší API, oprávnění, validaci dat a bezpečnostní kontroly.
- Kdy se ze Single Page Application stává Progressive Web App?
- Single Page Application se nestává Progressive Web App jen proto, že běží v prohlížeči bez plného reloadu. Progressive Web App přidává další vlastnosti, typicky manifest, service worker, možnost instalace, práci s cache a někdy offline režim. Jedna aplikace může být zároveň SPA i PWA, ale tyto pojmy popisují jiné vrstvy webové aplikace.
- Jak se u Single Page Application měří zobrazení stránek?
- Single Page Application potřebuje promyšlené měření, protože tradiční analytika založená na načtení dokumentu nemusí zachytit každou změnu obrazovky. Aplikace musí při změně routy odeslat virtuální zobrazení stránky nebo vlastní událost. Bez takové integrace vypadají návštěvy uměle krátké, konverzní cesta je neúplná a produktový tým vyhodnocuje chování uživatelů ze zkreslených dat.
Zdroje
- SPA (Single-page application)(otevře se v novém okně)
- History API(otevře se v novém okně)
- Fetch API(otevře se v novém okně)
- React Documentation(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
Související pojmy
