====== SSR (Server-Side Rendering) ======

**SSR** vrací webový vývoj ke kořenům (podobně jako funguje [[it_encyklopedie:php|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 [[it_encyklopedie:react|React]].
  * **Nuxt.js:** Hlavní volba pro [[it_encyklopedie:vue|Vue]].
  * **SvelteKit:** Moderní řešení pro [[it_encyklopedie:svelte|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).

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]