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 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).

Zpět na Architekturu