Trendem dnešní doby je tvořit webové aplikace jako jednostránkové (SPA) namísto klasických multistránkových webů. O co se jedná? Jaké jsou výhody a nevýhody těchto přístupů? To se dozvíte v tomto článku. Předtím ale zadefinujeme některé pojmy, se kterými nemusí být každý obeznámen.

Základem webových stránek jsou 3 technologie – HTML, CSS a JavaScript. HTML je značkovací jazyk, který definuje strukturu webové stránky a její obsah. CSS umožňuje měnit způsob zobrazení HTML elementů a jejich stylování (barvy, tvary, některé animace apod.). Poslední technologií je JavaScript, jedná se o programovací jazyk, díky kterému je možné vykonávat některé logické operace na straně prohlížeče, například validace formuláře při psaní, nebo pokročilejší animace.

Klasický multistránkový web

Tradičním přístupem při tvorbě webu je rozdělení do několika stránek. Při přecházení mezi těmito stránkami je využíváno odkazů. Při každém přechodu prohlížeč stahuje ze serveru celou stránku s obsahem daným na základě URL adresy (znova stahuje HTML, CSS a JavaScript). Weby jsou ale zpravidla postavené tak, že jednotlivé stránky některé části sdílejí, například hlavičku s menu. To znamená, že tyto části se při tradičním způsobu posílají při přechodu jednotlivých stránek stále znovu a znovu. Stejně tak se znovu načítájí obrázky. Prohlížeč využívá různé techniky, aby načítání urychlil, například si pamatuje obrázky (ale i CSS a JavaScript soubory), které již jednou načetl a uloží si je do lokální paměti a příště je již nenačítá znovu (po nějaké době si je zkusí znovu stáhnout, zda nedošlo ke změně). Většina těchto technik ale nefunguje při první návštěvě těchto stránek (prvním načtení).

Jednostránkový web (Single page application – SPA)

Novým přístupem tvorby webových stránek a aplikací je tzv. jednostránková webová aplikace (SPA). Příkladem těchto aplikací jsou například e-mailové služby na internetu. Při průchodu tímto webem prohlížeč nenačítá stále dokola celou webovou stránku. Toho se docílí pomocí JavaScriptu. Místo toho, aby server odeslal celé HTML a CSS, tak odešle jen základní HTML s některými hlavičkami, téměř bez obsahu a přiloží odkazy na soubory v JavaScriptu (skripty). Tyto skripty jsou následně staženy prohlížečem a načteny. Jakmile jsou skripty připravené, dojde k jejich vykonání, které vykreslí celou webovou stránku a doplní zbývající HTML a CSS.

Následně se celý web chová podobně, jako nativní aplikace v operačním systému. Přechod mezi stránkami je realizován tak, že JavaScript zachytí požadavek uživatele na přechod a vykoná sám dotaz na server a stáhne požadovaná data. Tato data nejsou v HTML, ale zpravidla v nějakém jiném textovém strukturovaném formátu. Data jsou poté vykreslena na stránku do určité části, tedy nedochází k aktualizování celé stránky. Při tomto procesu zůstává uživatel reálně celou dobu na jedné stránce a nepřechází jako u klasického přístupu mezi různými stránkami (uživatel by to ale neměl poznat). Je zřejmé, že při tomto přístupu je přechod mezi jednotlivými stánkami velmi rychlý oproti tradičnímu přístupu, nevýhodou však je těžkopádnost prvního načtení webu, kdy je potřeba stáhnout a připravit velké množství dat.

Výhody a nevýhody jednotlivých přístupů

Výhody multistránkových webů

• SEO (Search engine optimization), optimalizace pro internetové vyhledávače. Vyhledávače, jako je Google, nebo Seznam se nedokáží příliš dobře poprat s jednostránkovým webem (SPA). Zpravidla nepočkají na načtení JavaScriptu a načtou si web ještě předtím, než je kompletní. To pak vede k tomu, že při používání vyhledávače nejsou zobrazované výsledky daného webu takové, jaké by měly být. To znamená, že tradiční multistránkový způsob se jednodušeji optimalizuje pro tyto vyhledávače, protože server odesílá okamžitě informace o celé stránce.
• Počáteční načtení je rychlejší. Oproti SPA je počáteční načtení webu rychlejší, není tak těžkopádně. Navíc prohlížeč má k dispozici řadu technik, díky kterým si obsah stránek při navštívení načte do paměti. Příště je vytahuje jen z lokální paměti, rychlost přechodu mezi stránkami se poté může téměř vyrovnat SPA.

Nevýhody multistránkových webů

• Při přechodech na webové stránce se pokaždé načítá celá stránka – přechody jsou tedy pomalejší.
• Hůře se pracuje s JavaScriptem. Na rozdíl od SPA je zde JavaScript načten na každé stránce znovu a musí se tedy na každé stránce znovu zjistit některé parametry, které například potřebujeme pro práci s ním (například, na jaké stránce se nalézám apod.).
• Zpravidla větší zátěž na zdroje serveru.

Výhody jednostránkových webů

• Rychlost přechodů mezi jednotlivými stránkami (přechod je téměř okamžitý).
• Lépe se pracuje s JavaScriptem, jelikož je na něm postavený celý web.
• Díky tomu, že vykonáváme některé věci na straně klienta v prohlížeči, tak šetříme zdroje na serveru.
• Web může běžet i v offline módu. Dá se také přetvořit na progresivní webovou aplikaci, která je spustitelná podobně jako nativní aplikace (jak v mobilu, tak na počítači), o tom ale napíšeme v nějakém příštím článku.

Nevýhody jednostránkových webů

• Obtížně se dělá pokročilejší SEO (viz u výhod multistránkových webů). Nicméně objevují se technologie, jako je server side rendering (SSR), díky kterým he možné dosáhnout i pokročilejší optimalizace pro vyhledáváče (o tom ale více v některém z příštích článků).
• Pomalejší počáteční načtení (to je také možné řešit díky SSR).
• Pro spuštění webu je vyžadován JavaScript, který může být uživatelem v prohlížeči deaktivován.
• Náročnější na klientské zdroje (na počítač a prohlížeč uživatele).

DataSession používá nejmodernější technologie

V naší společnosti používáme nejmodernější technologie a zabýváme se především tvorbou webových aplikací jako SPA. Používáme i SSR, díky kterému jsme schopni vykompenzovat nevýhody této technologie, jako je horší SEO. Chcete si promluvit o vývoji webových aplikací? Obraťte se na nás. Zabýváme se tvorbou webových aplikací a řešení pro lidi, jako jste vy. Rádi si o vývoji povídáme s těmi, kteří chtejí založit úspěšnou firmu.