Pokud se pohybujete ve světě SEO už nějakou dobu, pravděpodobně jste se setkali s konceptem serverového renderování (SSR). Možná vás napadá otázka, proč vlastně volit SSR namísto renderování na straně klienta.
V tomto průvodci si detailněji představíme serverové renderování (SSR), jeho význam pro současný webový vývoj a také jak se liší od renderování na straně klienta (CSR). Prozkoumáme i frameworky a knihovny, které SSR podporují a jakým způsobem ho implementují.
Co je serverové renderování (SSR)?
Serverové renderování (SSR) je technika webového vývoje, při níž se obsah webové stránky generuje na serveru, a ne až v prohlížeči uživatele.
V praxi to znamená, že server vyprodukuje kompletní HTML stránku a tu pošle do prohlížeče. Tímto způsobem se zátěž přesouvá na stranu serveru. Prohlížeč pak obdrží stránku již připravenou k zobrazení, což se pozitivně projeví na rychlosti načítání.
Jak funguje serverové renderování?
Když uživatel vyžádá webovou stránku, server shromáždí potřebný JavaScript, HTML a CSS kód, a poté pošle kompletně vytvořenou stránku do uživatelova prohlížeče.
Prohlížeč tak nemusí stránku sestavovat od základů, což je rozdíl oproti renderování na straně klienta. Serverové renderování má za následek rychlejší načítání stránky a je také výhodné pro SEO.
V pozadí serverové renderování využívá webové frameworky, jako jsou Vue.js a Gatsby.js, k dynamickému generování plně funkční HTML stránky.
Tyto frameworky získávají data z API nebo databází a následně pomocí komponent nebo šablon vytvářejí finální HTML dokumenty. Jakmile server dokončí proces vytváření stránky, odešle ji do prohlížeče bez nutnosti dalšího zpracování.
Obrázek: reactpwa
Zjednodušený popis procesu serverového renderování:
- Klient odešle HTTP požadavek: Uživatel zadá URL adresu do prohlížeče. Prohlížeč vytvoří HTTP spojení a odešle požadavek na server.
- Načtení dat: Server načte potřebná data z API nebo databáze.
- Předběžné renderování: Server převede všechny potřebné JavaScriptové komponenty do statického HTML a toto HTML pošle do prohlížeče.
- Načtení a zobrazení stránky: Prohlížeč obdrží a zobrazí HTML ze serveru.
- Hydratace: Nakonec si prohlížeč stáhne JavaScriptový kód, který přidá interaktivitu na stránku.
Serverové renderování vs. Klientské renderování
Klientské renderování je v podstatě opakem serverového renderování. HTML dokument generuje prohlížeč a až poté jej ukáže uživateli. Podívejme se na hlavní rozdíly mezi oběma přístupy:
| Funkce | Serverové renderování (SSR) | Klientské renderování (CSR) |
| Počáteční načítání | Rychlé počáteční načtení | Může být pomalejší, protože závisí na načtení na straně klienta |
| Uživatelské prostředí | Vylepšené a plynulé uživatelské prostředí hned při první návštěvě | Může občas vést ke zpoždění uživatelského zážitku při první interakci, s vylepšením při dalších návštěvách |
| Přístupnost | Veškerý základní obsah je načten úvodním HTML dokumentem vygenerovaným serverem | Přístupnost může být problém, zvláště pokud mají uživatelé zakázaný JavaScript |
| SEO výkon | SSR je pro SEO velmi přínosné | Některé vyhledávače mohou mít problém s indexací dynamicky generovaných stránek na straně klienta |
| Škálovatelnost | Škálování webů s vysokou návštěvností je díky serverovému renderování jednodušší | Vývojáři musí pečlivě plánovat škálování webů využívajících klientské renderování |
| Zabezpečení | Jednodušší je snižovat serverové zranitelnosti při načítání stránek na serveru. | Náchylnější na útoky typu cross-site scripting (XSS) a další zranitelnosti spojené s renderováním na straně klienta |
Výhody serverového renderování pro SEO
- Rychlé počáteční načítání: Rychlost načítání stránky je klíčovým faktorem pro návštěvníky webu. Díky SSR uživatelé vidí kompletní HTML stránku téměř okamžitě. Rychlé načítání snižuje dobu, kterou uživatel čeká na interakci s webem.
- Rychlý výkon i na pomalých zařízeních/sítích: Uživatelé mohou mít pomalé internetové připojení nebo zařízení s nižším výkonem. Serverové renderování znamená, že uživatelská zařízení nemusí zpracovávat tolik JavaScriptu, což zvyšuje jejich výkon. Taková zařízení pak nepotřebují vysokou šířku pásma nebo výpočetní výkon pro zobrazení načtených HTML stránek.
- Konzistentní uživatelské prostředí: SSR vám umožní vytvořit dobrý první dojem díky rychlému Time to First Paint (TTFP). Rychle načítané HTML stránky dávají uživatelům pocit rychlého webu.
- Vylepšené SEO: Vyhledávače jako Google, Bing a YouTube berou v úvahu mnoho faktorů při hodnocení webových stránek. Mezi ně patří uživatelská zkušenost, čas, který uživatelé stráví na stránkách, a rychlost načítání. SSR vylepšuje všechny tyto aspekty, což zvyšuje šanci na vyšší umístění ve vyhledávačích.
- Jednoduchá manipulace s dynamickým obsahem: Vyhledávače mají rády dynamický obsah. Díky SSR mohou vývojáři snadno pracovat s dynamickým obsahem a personalizovat jej na základě uživatelských preferencí.
- Škálovatelnost a ukládání do mezipaměti: Při SSR probíhá počáteční načítání na serveru, což snižuje množství práce pro klienta a zlepšuje škálovatelnost. SSR může také využívat mezipaměť na úrovni serveru a sítě pro doručování obsahu (CDN), což snižuje zátěž serveru a zlepšuje výkon.
Existuje mnoho různých nástrojů a frameworků, které implementují SSR. Některé jsou navrženy výhradně pro podporu serverového renderování, zatímco jiné umí kombinovat renderování na straně klienta i serveru. Zde jsou některé z nejčastějších:
Vue.js
Vue.js je JavaScriptový framework pro vytváření uživatelských rozhraní, založený na standardních technologiích jako JavaScript, HTML a CSS. S tímto frameworkem můžete vytvářet jednoduchá i komplexní uživatelská rozhraní pomocí komponent a deklarativního programování.
Komponenty Vue standardně vytvářejí a manipulují s Document Object Model (DOM) v prohlížeči. Tento framework ale také umožňuje SSR, což znamená, že komponenty se renderují do HTML na serveru a posílají přímo do prohlížeče. Aplikace Vue s renderováním na straně serveru je považována za „univerzální“, protože se většina kódu spouští jak na serveru, tak i na straně klienta.
React.js
React je JavaScriptová knihovna pro tvorbu uživatelských rozhraní. Využívá programovací model založený na komponentách, kde aplikaci rozdělíte na malé, opakovaně použitelné díly. React je také deklarativní, což znamená, že je kód snadno předvídatelný a laditelný.
React je navržen tak, aby standardně uměl renderovat jak na straně klienta, tak i na serveru. Pokud chcete implementovat serverové renderování, musíte k tomu použít framework Node.js, jako je například Express.js. Je také nutné aktualizovat skripty v souboru package.json, aby se aplikace spouštěla ze serveru Express.
Gatsby
Gatsby je framework pro tvorbu webů založený na Reactu. Tento open-source framework je navržen tak, aby pomáhal vývojářům vytvářet rychlé webové aplikace. Gatsby je propojený s různými systémy pro správu obsahu (CMS), jako jsou Drupal a WordPress, což usnadňuje načítání dat.
Pro nastavení serverového renderování na Gatsby potřebujete Node.js server. SSR běží na Gatsby Cloud, kde je každý požadavek poslán workeru ve funkci getServerData. Všechna data z workeru jsou předána komponentě React, která vrací HTML dokument.
Angular
Angular je vývojová platforma vytvořená pomocí TypeScriptu. Tato platforma má framework založený na komponentách, který můžete použít pro tvorbu webových aplikací. Angular je vhodný jak pro malé, tak i pro velké, podnikové aplikace.
Stejně jako React, ani Angular standardně nepodporuje SSR. Můžete ale aplikaci Angular nakonfigurovat tak, aby serverové renderování implementovala pomocí kombinace s backendovým frameworkem Node.js, jako je Express.js. Angular Universal vám umožňuje renderovat komponenty na serveru a tím urychlit načítání stránek.
Jak zjistit, zda web používá SSR nebo CSR
Pokud jste vývojář nebo marketér, může být někdy těžké na první pohled poznat, zda web používá renderování na straně serveru, nebo klienta. Naštěstí existuje jednoduchý způsob, jak to zjistit. Projdeme si proces na příkladu webu etechblog.cz. Klikněte pravým tlačítkem myši na libovolné stránce a vyberte „Zobrazit zdrojový kód stránky“.
Pokud ve zdrojovém kódu vidíte značky jako ,
- , je pravděpodobné, že web běží na serverovém renderování.
Omezení serverového renderování
- Zvýšená složitost kódu: Implementace serverového renderování může vyžadovat další konfiguraci na straně serveru. Takový přístup může vést ke složitější kódové základně a tím ztížit údržbu.
- Zvýšená zátěž serveru: I když jsme zdůraznili, že SSR může zkrátit dobu načítání, při vysokém provozu může vést k problémům s výkonem. Server je zodpovědný za vykreslení obsahu HTML, což může občas vést k přetížení nebo dokonce k havárii.
Je serverové renderování to samé co serverové tagování?
Ne. Serverové renderování je přístup k webovému vývoji, kde server pošle kompletně načtenou HTML stránku do prohlížeče. SSR má za cíl urychlit načítání stránky a zlepšit SEO.
Serverové tagování znamená, že veškerá analytika a sledování se provádí na serveru. Když se tagy zpracovávají na serveru, prohlížeč se s tímto procesem nemusí zabývat, což zvyšuje bezpečnost a zrychluje výkon. Více se o serverovém tagování můžete dočíst zde.
Závěr
Serverové renderování je vhodnou volbou pro webové vývojáře, kteří chtějí zlepšit výkon své aplikace, dosáhnout rychlejšího načítání stránek a zlepšit uživatelský zážitek.
Na druhou stranu, pokud není SSR správně implementováno, může být náročné, protože údržba kódu může být komplikovanější. Výhody SSR však obvykle převažují nad nevýhodami, proto ho mnoho organizací s oblibou používá.
Dále si můžete přečíst o důvodech, proč používat serverové tagování namísto klientského.