SSR (renderování na serveru)
Také známo jako Server-side rendering, Server rendering
Stručně
HTML se staví na serveru při každém požadavku, takže návštěvník vidí obsah dřív, než se načte JavaScript.
Při SSR server spustí vaši stránku, promluví s databází nebo API a pošle hotové HTML. Prohlížeč ho hned vykreslí a JavaScript pak doplní chování (viz hydratace). Výsledkem je rychlé první vykreslení, funkční SEO a stránka, která přežije pomalý telefon na 4G.
Co vám to přinese
Obsahová stránka se na serveru vykreslí za pár stovek milisekund a návštěvník ji čte, zatímco se ještě stahuje 150–250 kB JavaScriptu. Na průměrném Androidu a pomalé síti je to rozdíl mezi tím, kdy text čtete hned, a tím, kdy tři sekundy koukáte na spinner.
Zároveň dostanou vyhledávače a náhledy odkazů plné HTML. Google roboti JavaScript nakonec spustí, ale Bing, LinkedIn a řada náhledů odkazů na tom spolehlivě nejsou — a crawler vidí stránku na pomalém, studeném spojení, ne na vašem rychlém notebooku.
Cena: najednou provozujete server
SSR znamená proces, který obslouží každý požadavek. Může spadnout, může být pomalý a potřebuje paměť, logy, health check i strategii nasazení — a každé vykreslení sáhne do databáze nebo API, takže pomalý dotaz zpomalí stránku všem, ne jen tomu, kdo klikl.
Stránka je nakonec tak rychlá, jak její nejpomalejší zdroj dat. Stránka produktu, která volá čtyři endpointy po 200 ms, se vyrenderuje za 800 ms v dobrý den. Řešením není rychlejší server, ale méně kol a cache — revalidace, CDN před aplikací nebo vykreslení pomalých částí až na klientovi.
Kdy stačí statické stránky
Server při každém požadavku potřebujete jen tehdy, když se výstup skutečně liší podle požadavku nebo uživatele. Landing page, článek na blogu, ceník, který se mění dvakrát denně — to je levnější a rychlejší jako předvygenerované HTML na CDN s malým dotazem na klientovi pro to osobní.
Pravidlo: data, která jsou pro všechny stejná minuty nebo hodiny, nemá smysl renderovat na požádání. Osobní data patří na klienta nebo do streamovaného a cachovaného fragmentu — jinak platíte za server, aby tisíckrát denně skládal stejný řetězec.
Zdroje
Související pojmy
Hydratace
JavaScript na klientovi převezme HTML ze serveru a navěsí události — obě strany přitom musí vykreslit stejný strom.
SPA (jednostránková aplikace)
Jedna HTML stránka načtená jednou; každý přechod proběhne v prohlížeči bez žádosti o nový dokument ze serveru.
Výkonnostní rozpočet
Tvrdý limit váhy stránky, JavaScriptu nebo času načtení, který hlídá CI, aby web nezpomaloval po jedné funkci.