Sobes.tech
Hulp bij sollicitatiegesprekken
Hulpbronnen
Voorbereiding op sollicitatiegesprek
Hulpbronnen
Zoeken naar een baan
Hulpbronnen
Legaal
Terug naar vragen
Middle

Hoe werkt de server-side rendering (SSR) technologie?

sobes.tech AI

Antwoord van AI

Server-side rendering (SSR) is een techniek waarbij de eerste weergave van een webpagina plaatsvindt op de server, niet in de browser van de gebruiker.

Bij normaal client-side rendering ontvangt de browser een leeg HTML-bestand met een link naar JavaScript. De browser laadt de JavaScript, analyseert het, voert het uit en bouwt vervolgens dynamisch de DOM op en toont de inhoud.

Met SSR verwerkt de server de componenten van de applicatie, genereert de volledige HTML-code en stuurt deze naar de browser.

Fasen van SSR:

  1. Verzoek: De browser van de gebruiker stuurt een HTTP-verzoek naar de server.
  2. Server-side rendering: De server voert de JavaScript-code van de applicatie uit, inclusief de logica voor het renderen van UI-componenten, en krijgt een volledig gevormde HTML-string.
  3. Antwoord: De server stuurt dit HTML-bestand naar de browser.
  4. Eerste weergave: De browser ontvangt de HTML en toont onmiddellijk de inhoud van de pagina, omdat alle elementen al in de markup aanwezig zijn.
  5. Hydratatie: Na het laden van de HTML laadt en voert de browser de JavaScript-code van de applicatie uit. Deze code "brengt tot leven" de statische markup, voegt interactiviteit toe, event handlers en bindt de staat.

Voordelen van SSR:

  • Verbeterde SEO: Zoekmachines indexeren pagina's met volledig gegenereerde HTML beter.
  • Snellere eerste inhoudsweergave (FCP - First Contentful Paint): De gebruiker ziet de inhoud van de pagina sneller.
  • Betere toegankelijkheid voor zwakkere apparaten en trage internetverbindingen: Minder afhankelijkheid van de prestaties van het apparaat van de client voor het weergeven van de hoofdinhoud.

Nadelen van SSR:

  • Toegenomen belasting op de server: De server voert meer berekeningen uit voor rendering.
  • Ontwikkelingscomplexiteit: Het is nodig om rekening te houden met de isomorfie van de code (de mogelijkheid om het zowel op de server als op de client uit te voeren).
  • Groter antwoordformaat: Het eerste antwoord van de server bevat volledige HTML.
// Voorbeeld van client-side code (pseudocode)
// De normale client-app ontvangt een lege div
const appDiv = document.getElementById('app');
// JavaScript wordt geladen en creëert inhoud
appDiv.innerHTML = `<h1>Hallo, wereld!</h1>`;

// Voorbeeld van server-side code (pseudocode met framework)
// Bij SSR genereert de server volledige HTML
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// De server stuurt iets als:
// <div id="app"><h1>Hallo, wereld!</h1></div>
VorigeVolgende