====== CSR (Client-Side Rendering) ======

**CSR** je základním kamenem moderních jednostránkových aplikací (SPA). Umožňuje vytvářet weby, které působí stejně plynule jako aplikace v mobilu – při přechodu mezi sekcemi se stránka neproblikne ani znovu nenačítá, mění se pouze její obsah.



===== 1. Jak CSR funguje v praxi? =====

  1. **Prvotní požadavek:** Uživatel navštíví web.
  2. **Minimalistická odpověď:** Server pošle velmi malý HTML soubor (často jen prázdný ''<div>'' a odkaz na JavaScript).
  3. **Stahování JS:** Prohlížeč začne stahovat hlavní JavaScriptový balík (framework jako [[it_encyklopedie:react|React]] nebo [[it_encyklopedie:vue|Vue]]).
  4. **Vykreslení:** JavaScript se spustí, vytvoří strukturu webu a zobrazí ji uživateli.
  5. **Načtení dat:** Pokud jsou potřeba data (např. seznam produktů), JavaScript si je vyžádá přes API a "vstříkne" je do stránky.

===== 2. Hlavní výhody CSR =====

  * **Plynulý uživatelský zážitek:** Jakmile se aplikace jednou načte, je navigace mezi stránkami okamžitá. Žádné bílé obrazovky mezi kliknutími.
  * **Snížení zátěže serveru:** Server pouze odesílá statické soubory. Veškerou výpočetní práci spojenou s vykreslováním odvádí počítač nebo mobil uživatele.
  * **Ideální pro webové aplikace:** Pro dashboardy, editory nebo sociální sítě, kde uživatel tráví hodně času a provádí mnoho interakcí, je CSR nejlepším řešením.



===== 3. Nevýhody a rizika =====

  * **Pomalý první start:** Uživatel musí nejdříve stáhnout a spustit celý JavaScript. Na slabších mobilech to může znamenat několik sekund čekání u prázdné obrazovky (tzv. "White Screen of Death").
  * **SEO výzvy:** Vyhledávače (zejména ty starší nebo méně pokročilé) mohou vidět jen prázdnou stránku, protože nečekají na spuštění JavaScriptu. Googlebot už JS zvládá, ale stále je to pro něj náročnější než u [[it_encyklopedie:ssr|SSR]].
  * **Závislost na výkonu zařízení:** Pokud má uživatel starý telefon, může být aplikace zasekaná, protože vykreslování spotřebovává hodně procesorového výkonu.

===== 4. Srovnání: CSR vs. SSR =====

^ Vlastnost ^ CSR (Klient) ^ SSR (Server) ^
| **První načtení** | Pomalejší (stahuje se JS) | Rychlejší (posílá se HTML) |
| **Přechody mezi stránkami** | Okamžité, plynulé | Pomalé (nový požadavek) |
| **Indexace (SEO)** | Náročnější | Bezproblémová |
| **Závislost na internetu** | Potřebuje stabilitu pro API | Stačí pro stažení HTML |

===== 5. Kdy CSR (ne)použít? =====

  * **ANO:** Interní systémy, administrace, interaktivní nástroje (např. Figma, Gmail), weby vyžadující přihlášení (kde SEO není prioritou).
  * **NE:** Veřejné magazíny, e-shopy (kde záleží na každé milisekundě a SEO), jednoduché statické weby.

> **Zlatá střední cesta:** Dnešní moderní frameworky jako Next.js nebo Nuxt.js se snaží oba světy kombinovat. První stránku vám pošlou jako **SSR** (pro rychlost a SEO) a jakmile ji otevřete, přepnou se do **CSR** módu (pro plynulost).

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