SSR (Server-Side Rendering)

SSR vrací webový vývoj ke kořenům (podobně jako funguje PHP), ale s využitím moderních JavaScriptových frameworků. Umožňuje spojit interaktivitu moderních aplikací s výhodami klasických webů, jako je rychlé zobrazení obsahu a skvělá čitelnost pro vyhledávače.

1. Jak SSR funguje?

1. **Požadavek:** Uživatel zadá adresu webu nebo klikne na odkaz.
2. **Server:** Server spustí JavaScriptový kód aplikace, stáhne potřebná data z databáze a sestaví kompletní HTML stránku.
3. **Odpověď:** Server pošle toto hotové HTML do prohlížeče.
4. **Zobrazení:** Prohlížeč okamžitě vykreslí obsah (uživatel vidí web ihned).
5. **Hydratace (Hydration):** Na pozadí se stáhne JavaScript, který se "přilepí" k hotovému HTML a aktivuje interaktivní prvky (tlačítka, menu).

2. Výhody SSR

Lepší SEO (Optimalizace pro vyhledávače): Protože server posílá hotové HTML, roboti jako Googlebot vidí veškerý obsah ihned. U CSR aplikací mají někdy vyhledávače problém obsah správně zaindexovat.
Rychlejší „First Paint“: Uživatel vidí obsah stránky téměř okamžitě, i na pomalém zařízení nebo slabém internetu, protože prohlížeč nemusí nejdříve stahovat a spouštět obří balíky JavaScriptu.
Sociální sítě: Při sdílení odkazu na Facebooku nebo Twitteru se správně zobrazí náhledy (Open Graph meta tagy), protože jsou již v HTML kódu přítomny.

3. Nevýhody a výzvy

Zátěž serveru: Každý požadavek znamená, že server musí stránku „vyrenderovat“. To vyžaduje více výkonu než u CSR, kde server jen posílá statické soubory.
Složitost vývoje: Kód musí být napsán tak, aby běžel jak na serveru (Node.js), tak v prohlížeči. Některé objekty (např. window nebo document) na serveru neexistují.
Doba odezvy (TTFB): První bajt může dorazit o něco později, protože server musí nejdříve stránku sestavit.

4. Srovnání: SSR vs. CSR

Vlastnost	SSR (Server-Side)	CSR (Client-Side)
Rychlost zobrazení	Velmi rychlá	Pomalejší (čeká se na JS)
SEO	Vynikající	Komplikovanější
Zátěž serveru	Vysoká	Minimální
Pocit z aplikace	Tradiční web	Plynulý (jako mobilní aplikace)

5. Moderní nástroje pro SSR

Dnešní vývojáři málokdy implementují SSR od nuly. Používají tzv. „meta-frameworky“:

Next.js: Nejoblíbenější framework pro React.
Nuxt.js: Hlavní volba pro Vue.
SvelteKit: Moderní řešení pro Svelte.

Pojem Hydratace: Je to klíčový moment u SSR. Představte si to jako sušenou polévku (HTML ze serveru), kterou v prohlížeči zalijete horkou vodou (JavaScriptem). Polévka „ožije“ a stane se z ní plnohodnotné jídlo (interaktivní aplikace).

Zpět na Architekturu