Sobes.tech
Pomoc s pohovorom
Zdroje
Príprava na pohovor
Zdroje
Hľadanie práce
Zdroje
Právne
Späť k otázkam
Middle

Ako funguje technológia server-side renderingu (SSR)?

sobes.tech AI

Odpoveď od AI

Server-side rendering (SSR) je technika, pri ktorej sa prvým zobrazením webovej stránky sa začína na serveri, nie v prehliadači používateľa.

Pri bežnom klientsko-renderovacom procese, prehliadač dostáva prázdny HTML súbor s odkazom na JavaScript. Prehliadač načíta JavaScript, analyzuje ho, vykoná ho a až potom dynamicky vytvára DOM a zobrazuje obsah.

Pri SSR server spracováva komponenty aplikácie, tvorí hotový HTML kód a odosiela ho prehliadaču.

Fázy SSR:

  1. Žiadosť: Používateľský prehliadač odosiela HTTP žiadosť na server.
  2. Renderovanie na serveri: Server spúšťa JavaScript kód aplikácie, vrátane logiky renderovania UI komponentov, a získava úplne vytvorený HTML reťazec.
  3. Odpoveď: Server odosiela tento HTML súbor prehliadaču.
  4. Prvé zobrazenie: Prehliadač prijíma HTML a okamžite zobrazuje obsah stránky, pretože všetky prvky sú už prítomné v značke.
  5. Hydratácia (Hydration): Po načítaní HTML prehliadač načíta a vykoná JavaScript kód aplikácie. Tento kód "oživuje" statickú štruktúru, pridáva interaktivitu, obslužné rutiny udalostí a viaže stav.

Výhody SSR:

  • Vylepšené SEO: Vyhľadávacie roboty lepšie indexujú stránky s úplne vytvoreným HTML.
  • Rýchlejšie prvé vykreslenie (FCP - First Contentful Paint): Používateľ vidí obsah stránky rýchlejšie.
  • Vylepšený prístup pre slabé zariadenia a pomalý internet: Menšia závislosť od výkonu klientského zariadenia pri zobrazovaní hlavného obsahu.

Nevýhody SSR:

  • Zvýšená záťaž na server: Server vykonáva viac výpočtov pre renderovanie.
  • Zložitosť vývoja: Je potrebné brať do úvahy izomorfizmus kódu (možnosť vykonávania na serveri aj na klientovi).
  • Väčšia veľkosť odpovede: Prvá odpoveď servera obsahuje úplný HTML.
// Príklad klientskeho kódu (pseudokód)
// Bežná klientska aplikácia dostáva prázdny div
const appDiv = document.getElementById('app');
// JavaScript sa načíta a vytvorí obsah
appDiv.innerHTML = `<h1>Hello, world!</h1>`;

// Príklad serverového kódu (pseudokód s použitím frameworku)
// Pri SSR, server generuje úplný HTML
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Server odosiela niečo ako:
// <div id="app"><h1>Hello, world!</h1></div>
PredchádzajúceĎalej