V současnosti oblíbené řešení webových stránek a aplikací v podobě jednostránkových (SPA) má svá úskalí, která se snaží vyřešit technologie SSR (nebo také SSG). O tom, co je to jednostránková webová aplikace jsme psali v našem dřívějším článku zde. I přesto připomeneme nevýhody tohoto přístupu:

1. Obtížně se dělá pokročilejší SEO.
2. Pomalejší počáteční načtení.
3. Náročnější na klientské zdroje (na počítač a prohlížeč uživatele).
4. Pro spuštění webu je vyžadován JavaScript, který může být uživatelem v prohlížeči deaktivován.

Obzvláště bod 1 dělá z SPA technologii nevhodnou pro použití v obyčejných webových prezentacích. SSR je zkratka pro server side renderign, přičemž název této technologie přesně vystihuje to, o co se snažíme, tedy vykreslit stránku na serveru ještě před odesláním do webového prohlížeče.

SSR vs. SSG

A co tedy znamená již zmíněná zkratka SSG? Jedná se o zkratku názvu static site generation. Pokoušíme se o stejnou věc jako při SSR, tedy vykreslit konkrétní stránku na serveru ještě předtím než ji odešleme do prohlížeče. Rozdíl oproti SSR je ale v tom, kdy tuto stránku vykreslujeme. V případě SSR vykreslíme stránku na serveru při každém prvním uživatelském dotazu, zatímco při SSG si konkrétní stránky předpřipravíme už dopředu a poté je staticky posíláme uživateli na základě jeho dotazu.

Takto řečeno to může znít tak, že se vracíme opět k multistránkovému webu, který jsme ale nahradili kvůli výhodám právě jednostránkovým. Rozdíl je v tom, že SSR nebo SSG využíváme jen při prvním dotazu na server, který odešle již předpřipravenou stránku do prohlížeče. Následně se v prohlížeči po načtení JavaScriptu stane z webu opět plnohodnotná jednostránková aplikace a při dalším brouzdání po webovce (přechodech přes různými odkazy a načítání dalších stránek), již stránku na serveru nevykreslujeme a fungujeme tak jako při obyčejném jednostránkovém webu. Lépe se celá situace vysvětlí na příkladě:

Na obrázku výše je znázorněno, že pokud chce uživatel zobrazit například stránku www.datasession.cz/projekty, tak server mu již odešle HTML stránku odpovídající projektům. V této části tedy fungujeme stejně jako u multistránkového webu. Díky tomu například internetový vyhledáváč zaindexuje stránku projektů se správným popisem a při vyhledáváních se následně stránka projektů zobrazuje korektně. Pokud je takto odeslaná stránka ze serveru připravená k okamžitému použití (není zapotřebí načtení JavaScriptu), tak je to stejné jako u multistránkového webu a uživatel nemusí čekat na donačtení JavaScriptu a jeho vykreslení stránky v prohlížeči. Tím eliminujeme body 1 a 2 z úvodu tohoto článku, počáteční načtení je rychlé a řešíme tímto způsobem i SEO. Bohužel body 3 a 4 eliminovat nedokážeme, protože se stále jedná o SPA, jen poskytujeme rozšíření, díky kterému eliminujeme hlavní problémy této technologie v dnešní době.

Bohužel jak to již bývá, tak ani tato technologie nemá jen samá pozitiva. Bohužel renderovat stránku při každém počátečním požadavku je náročné na serverové zdroje. Server je tím pádem i náchylnější k DDoS útoku, kdy mnoha počátečními požadavky najednou můžeme rychleji vyčerpat zdroje serveru a úplně ho shodit. Nebyly by to ale lidé, kdyby nepřišli s nějakým dalším řešením tohoto problému. Co kdybychom stránky nerendrovali na serveru při každém počátečním dotazu, ale předpřipravili si je dopředu? Od toho je tu již zmíněné SSG, kdy si jednotlivé stránky předpřipravíme a pak je odesíláme podle konkrétního požadavku. Bohužel tato technologie má nevýhodu, že nemůžeme na serveru například dynamicky načítat položky, vše se totiž připraví dopředu. Ke změně položek bychom museli opět přegenerovat stránku. Můžeme ale přegenerovávát stránku v nějakém intervalu, například jednou za den v noci. Omezíme tím náročnost na serverové zdroje a ve většině případech může být tato technologie dostatečná.

## Next.js Nyní se můžeme podívat na to, jak firma DataSession implementuje SSR a SSG. Používáme framework Next.js, který implementuje SSR a SSG a další pomocné nástroje do React.js. Vyjma implementace těchto dvou technologií nabízí i routování, komponentu pro optimalizaci obrázků a mnoho dalšího. Next.js vznikl v roce 2016, což je na webové technologie již poměrně dlouhá doba, avšak teprve nyní se začal více prosazovat a doznávat určitých změn. Samotný web, na kterém čtete tento článek využívá Next.js frameworku.

Málokterá firma v České republice je schopna implementovat webové aplikace s SSR a SSG. U nás v DataSession se můžete spolehnout, že jsme schopni tyto moderní technologie využít. Webová aplikace od nás bude zároveň kvalitně zpracovaná a to jak z pohledu uživatele aplikace, tak i po stránce technologické. 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.