Server-side rendering (renderování na straně serveru)

Příklady z praxe

1. 01

   Detail produktu v e-shopu

   E-shop vykreslí detail produktu na serveru, protože název, popis, cenu a strukturovaná metadata potřebují vidět uživatelé i vyhledávače hned v první odpovědi. Next.js načte produkt z databáze na serveru a pošle prohlížeči hotové HTML. Interaktivní výběr variant nebo vložení do košíku se může připojit až po hydrataci.

   export default async function ProductPage({ params }) {
     const product = await getProduct(params.id);
   
     return (
       <main>
         <h1>{product.name}</h1>
         <p>{product.description}</p>
         <strong>{product.price} Kč</strong>
       </main>
     );
   }

2. 02

   Dashboard s personalizovanými daty

   Firemní dashboard po přihlášení používá server-side rendering pro první přehled metrik, aby uživatel nečekal na prázdnou obrazovku. Server načte data konkrétního účtu, sestaví HTML a pošle ho jako odpověď. Pokud jsou dotazy pomalé a stránka se často obnovuje, tým přidá cache nebo rozdělí dashboard na rychlý základ a později načítané widgety.

   app.get('/dashboard', async (req, res) => {
     const user = await requireUser(req);
     const stats = await loadStats(user.id);
   
     res.send(renderDashboardHtml({ user, stats }));
   });

Časté omyly

MýtusSSR vyřeší výkon, protože uživatel dostane HTML ze serveru.

Ve skutečnostiServer-side rendering řeší hlavně první dostupnost obsahu. Pomalý backend, velký klientský JavaScript nebo těžká hydratace mohou výsledný web pořád brzdit.

MýtusKdyž mám React, musím použít server-side rendering.

Ve skutečnostiReact lze provozovat jako čistě klientskou aplikaci, přes SSR, staticky generované stránky nebo kombinaci více přístupů. Volba závisí na SEO, typu obsahu, interaktivitě a provozních nákladech.

Časté dotazy

Proč server-side rendering často pomáhá SEO?

Server-side rendering často pomáhá SEO tím, že vyhledávač dostane HTML s hlavním obsahem, nadpisy, odkazy a metadaty už v odpovědi serveru. Moderní vyhledávače umí spouštět JavaScript, ale renderovací fáze může být opožděná nebo omezená. SSR snižuje riziko, že důležitý obsah bude dostupný až po složitém klientském běhu aplikace.

Znamená server-side rendering rychlejší web pro každého?

Server-side rendering neznamená automaticky rychlejší web pro každého uživatele. SSR může zlepšit první zobrazení obsahu, ale zároveň přidává práci serveru a může prodloužit čekání na první bajt, pokud server pomalu načítá data. Celkový výkon závisí na cachování, velikosti JavaScriptu, hydrataci, databázových dotazech a síťové vzdálenosti mezi uživatelem a serverem.

Kdy server-side rendering zbytečně komplikuje frontend?

Server-side rendering zbytečně komplikuje frontend hlavně u aplikací, které jsou přístupné až po přihlášení, nejsou indexované a většinu hodnoty tvoří interaktivní stav v prohlížeči. Typickým příkladem je administrace s filtry, grafy a lokálními úpravami dat. SSR zde může přidat problémy s hydratací a serverovou zátěží, aniž by výrazně zlepšil uživatelský zážitek.

Jak server-side rendering souvisí s hydratací v Reactu?

Server-side rendering v Reactu často končí hydratací, při které klientský React naváže interaktivní chování na HTML vytvořené serverem. HTML je viditelné dříve, ale komponenty začnou plně reagovat až po načtení klientského JavaScriptu. Nesoulad mezi serverovým a klientským výstupem vede k varováním nebo překreslení, proto musí být první render deterministický.

Zdroje

1. Server APIs(otevře se v novém okně)React
2. Next.js Docs(otevře se v novém okně)Next.js
3. Server-side website programming(otevře se v novém okně)MDN Web Docs

Související pojmy

• HydrationHydration je proces, při kterém JavaScript v prohlížeči oživí už hotové HTML vykreslené na serveru: připojí k existujícím DOM uzlům obsluhu událostí, stav a komponentový strom, aniž by značky znovu vytvářel. Uživatel díky tomu vidí obsah okamžitě, ale interaktivní se stránka stane až po stažení a spuštění klientského balíčku.
• RenderRender je proces převodu dat, kódu nebo scény do výsledné vizuální podoby, například webové stránky, komponenty aplikace, snímku videa nebo 3D obrazu. Ve vývoji označuje jak práci prohlížeče a UI frameworku, tak výpočet grafiky na CPU nebo GPU.
• Single Page ApplicationSingle Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.
• Code splittingCode splitting je technika, při které se JavaScriptový balík aplikace rozdělí na menší soubory (chunky), jež prohlížeč stahuje až ve chvíli, kdy jsou skutečně potřeba. Místo jednoho velkého bundlu se při prvním načtení přenese jen kód nutný pro zobrazenou stránku, zbytek dorazí později na vyžádání.
• Crawl budgetCrawl budget je množství URL adres jednoho webu, které vyhledávací robot za dané období skutečně stáhne. Vzniká kombinací dvou věcí: kolik požadavků server bez zpomalení unese (crawl capacity) a kolik stránek považuje vyhledávač za dost zajímavé na stažení (crawl demand). Limituje hlavně weby s desítkami tisíc URL.
• Skeleton screenSkeleton screen je způsob zobrazení načítacího stavu, při kterém rozhraní ukáže šedé obrysy budoucího obsahu (bloky místo textu, obdélníky místo obrázků) namísto spinneru. Uživatel tak vidí strukturu stránky dřív, než dorazí data, čekání mu připadá kratší a po dokreslení obsahu nedochází k poskakování rozvržení.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.