V čom spočíva rozdiel medzi serverovým renderovaním a…

Server-side rendering (SSR) a SPA (Single Page Application) predstavujú rôzne prístupy k tvorbe webových aplikácií.

Server-side rendering (SSR):

Počiatočný HTML sa generuje na serveri a obsahuje údaje z prvého požiadavku.
Prehliadač dostáva úplne pripravený HTML, ktorý môže okamžite zobraziť.
Po načítaní stránky sa interaktivita pridáva pomocou JavaScriptu (hydratačný proces).

Výhody SSR:

Lepšia SEO optimalizácia, pretože vyhľadávacie roboty vidia hotový obsah.
Rýchlejšie čas prvého vykreslenia.
Lepší výkon na slabších zariadeniach.

Nevýhody SSR:

Väčšia záťaž na server.
Zložitejšia architektúra aplikácie.

SPA (Single Page Application):

Prehliadač načíta jeden HTML súbor, ktorý obsahuje minimálnu štruktúru a odkazy na JavaScript a CSS.
Celý obsah a logika aplikácie sa načítava a vykresľuje na strane klienta pomocou JavaScriptu.
Prechody medzi stránkami sa vykonávajú bez obnovenia, manipuláciou s DOM a históriou prehliadača.

Výhody SPA:

Plynulé prechody medzi stránkami.
Pocit nativnej aplikácie.
Menšia záťaž na server po prvom načítaní.
Jednoduchý vývoj s použitím frameworkov ako React, Angular, Vue.js.

Nevýhody SPA:

Problémy s SEO, pretože obsah sa generuje na klientovi a môže byť nedostupný pre vyhľadávacie roboty.
Dlhší čas prvého vykreslenia, pretože prehliadač musí načítať a vykonať celý JS bundle.
Vysoké požiadavky na výkon zariadenia klienta.

Kľúčové rozdiely v tabuľke:

Charakteristika	SSR	SPA
Generovanie obsahu	Na serveri	Na klientovi
Prvé vykreslenie	Rýchle	Pomalšie (do načítania JS)
SEO	Dobré	Môžu byť problémy
Zaťaženie na serveri	Vysoké na začiatku	Nízke po prvom načítaní
Používateľský zážitok	Môžu byť zreteľné obnovenia	Plynulé prechody
Zložitosť vývoja	Vyššia	Nižšia (s použitím frameworkov)

Príklad SSR (zjednodušený):

// Serverový kód (Node.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const data = { title: 'Ahoj, svet!', content: 'Toto je obsah zo servera.' };
  const html = `
    <html>
      <head>
        <title>${data.title}</title>
      </head>
      <body>
        <h1>${data.title}</h1>
        <p>${data.content}</p>
        <script src="/client.js"></script> // Skript pre interaktivitu
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server počúva na porte 3000');
});

Príklad SPA (zjednodušený, koncepčný):

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Môj SPA</title>
  <script src="/bundle.js"></script> // Celý JS kód aplikácie
</head>
<body>
  <div id="app"></div> // Miesto pre klientské renderovanie
</body>
</html>

V SPA bude bundle.js obsahovať logiku pre vykresľovanie všetkých komponentov a správu smerovania na strane klienta.

V čom spočíva rozdiel medzi serverovým renderovaním a SPA (jednostránkovou aplikáciou)?