Sobes.tech
Interjú segítség
Források
Interjú előkészítése
Források
Álláskeresés
Források
Jogi
Vissza a kérdésekhez
Middle

Hogyan működik a szerveroldali renderelés (SSR) technológia?

sobes.tech MI

Válasz az MI-től

A szerveroldali renderelés (SSR) olyan technika, amely során egy weboldal első megjelenítése a szerveren történik, nem a felhasználó böngészőjében.

A szokásos kliensoldali renderelésnél a böngésző üres HTML-fájlt kap JavaScript hivatkozással. A böngésző betölti a JavaScriptet, elemzi, végrehajtja, majd dinamikusan felépíti a DOM-ot és megjeleníti a tartalmat.

Az SSR esetén a szerver feldolgozza az alkalmazás komponenseit, elkészíti a teljes HTML-kódot, és elküldi a böngészőnek.

Az SSR lépései:

  1. Kérés: A felhasználó böngészője HTTP-kérést küld a szervernek.
  2. Szerveroldali renderelés: A szerver futtatja az alkalmazás JavaScript-kódját, beleértve a UI-komponensek renderelési logikáját, és teljesen kialakított HTML-sorozatot kap.
  3. Válasz: A szerver ezt a HTML-fájlt küldi a böngészőnek.
  4. Első megjelenítés: A böngésző megkapja a HTML-t és azonnal megjeleníti az oldal tartalmát, mivel minden elem már jelen van a markupban.
  5. Hidratálás: A HTML betöltése után a böngésző betölti és végrehajtja az alkalmazás JavaScript-kódját. Ez a kód "életre kelti" a statikus markupot, interaktivitást, eseménykezelőket ad hozzá, és összekapcsolja az állapotot.

Az SSR előnyei:

  • Fejlettebb SEO: A keresőmotorok jobban indexelik a teljesen kialakított HTML-t tartalmazó oldalakat.
  • Gyorsabb első tartalomkép (FCP - First Contentful Paint): A felhasználó gyorsabban látja az oldal tartalmát.
  • Jobb hozzáférhetőség gyenge eszközök és lassú internet esetén: Kevesebb függőség a kliens eszköz teljesítményétől.

Az SSR hátrányai:

  • Növelt terhelés a szerveren: A szerver több számítást végez a rendereléshez.
  • Fejlesztési bonyolultság: Figyelembe kell venni a kód izomorfizmusát (a lehetőséget, hogy mind szerveren, mind kliens oldalon fusson).
  • Nagyobb válaszméret: Az első szerverválasz tartalmazza a teljes HTML-t.
// Példa klienskódra (szó szerinti kód)
// A normál kliensalkalmazás üres divet kap
const appDiv = document.getElementById('app');
// A JavaScript betöltődik és tartalmat hoz létre
appDiv.innerHTML = `<h1>Szia, világ!</h1>`;

// Példa szerverkódra (keretrendszerrel pseudokód)
// SSR esetén a szerver teljes HTML-t generál
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// A szerver valami ilyesmit küld:
// <div id="app"><h1>Szia, világ!</h1></div>
KorábbiKövetkező