Jak SSR funguje
Při každém požadavku server spustí React (nebo jiný framework), vygeneruje HTML z komponent a dat, a odešle hotovou stránku prohlížeči. Prohlížeč zobrazí stránku okamžitě a poté stařhne JavaScript, který stránku „oživí“ (hydration) pro interaktivitu. Výsledek: rychlé první zobrazení + plná interaktivita.
SSR vs. SPA vs. SSG
SPA (Single Page Application) vše renderuje v prohlížeči — rychlá navigace, ale pomalé první načtení a špatné SEO. SSG (Static Site Generation) generuje stránky při buildu — nejrychlejší, ale obsah se aktualizuje až při dalším buildu. SSR generuje při každém požadavku — vždy aktuální data, dobré SEO, ale vyšší zátěž serveru.
SSR v Next.js
Next.js nabízí všechny tři přístupy v jednom frameworku. S App Routerem jsou komponenty defaultně serverové (SSR). Statické stránky se generují automaticky, kde je to možné. Dynamické stránky používají SSR. Můžete kombinovat v rámci jedné stránky — statický layout s dynamickým obsahem.
Výhody SSR pro byznys
SSR přináší lepší SEO (vyhledávače vidí kompletní HTML), rychlejší první načtení (lepší Core Web Vitals), správné OG meta tagy pro sdílení na sociálních sítích a lepší přístupnost. Pro firemní weby a e-shopy je SSR prakticky standard. V Appitect všechny weby stavíme s SSR v Next.js.
Praktický příklad
Když Google bot navstivi vas web, SSR mu serviruje kompletni HTML stranku s veskerym obsahem. Bot nemusai cekat na JavaScript, okamzite vidi vsechny texty, nadpisy, meta tagy a odkazy. Vysledek: lepsi indexace a vyssi pozice ve vyhledavani.