Terug naar begrippenlijst
Server-side rendering
Server-side rendering, vaak afgekort tot SSR, is een methode waarbij de server het zware werk doet voordat een bezoeker de website te zien krijgt. In plaats van een leeg wit scherm te sturen dat de browser van de klant vervolgens zelf moet invullen met code (wat bij client-side rendering gebeurt), serveert de server een kant-en-klare HTML-pagina. De bezoeker ziet de inhoud van de site vrijwel direct, terwijl de interactieve elementen op de achtergrond worden ingeladen. Het is de digitale variant van een menukaart die al gedrukt klaarligt, in plaats van dat de ober aan tafel nog moet gaan schrijven.
Inhoudsopgave
Een vliegende start voor je bezoeker
Wanneer een gebruiker op je link klikt, telt elke milliseconde. Bij SSR hoeft de browser niet te wachten tot alle scripts zijn gedownload en uitgevoerd voordat er tekst of beeld verschijnt. De pagina is namelijk al “gerenderd” op de server. Dit zorgt voor een razendsnelle eerste indruk, wat vooral op mobiele apparaten of bij een tragere internetverbinding een wereld van verschil maakt. Een bezoeker die direct ziet waar hij aan toe is, zal minder snel geneigd zijn om de website voortijdig te verlaten.
Vrienden worden met de zoekmachine
Zoekmachines zoals Google zijn dol op websites die hun inhoud direct prijsgeven. Omdat de server een volledige HTML-pagina stuurt, kunnen de “crawlers” van zoekmachines de tekst en afbeeldingen direct indexeren zonder dat ze ingewikkelde scripts hoeven uit te voeren. Dit geeft je een flinke voorsprong in de strijd om de hoogste posities. Met SSR zorg je er dus voor dat je content niet alleen voor mensen, maar ook voor de algoritmes van de zoekmachines direct leesbaar en begrijpelijk is.
De server doet de zware lift
Door de berekeningen op de server uit te voeren, ontlast je het apparaat van je bezoeker. Of iemand nu een gloednieuwe laptop of een wat oudere smartphone gebruikt: de ervaring blijft consistent en vloeiend. De server is immers een krachtpatser die speciaal is ingericht om dit soort taken razendsnel af te handelen. Je verplaatst de technische werklast van de klant naar jouw eigen infrastructuur, waardoor de drempel om je website te gebruiken voor iedereen zo laag mogelijk blijft.
De perfecte balans tussen snelheid en interactie
Moderne SSR-technieken zijn zo slim dat ze de voordelen van een statische pagina combineren met de interactiviteit van een app. Nadat de eerste pagina vliegensvlug is getoond, neemt de browser het stokje over voor de verdere navigatie. Dit proces noemen we ook wel “hydratatie”. Hierdoor geniet de klant van de snelheid van een kant-en-klare pagina bij binnenkomst, maar behoudt hij het soepele en dynamische gevoel van een moderne webapplicatie tijdens het surfen.
Veelgestelde vragen
Bij SSR bouwt de server de pagina op en stuurt deze compleet naar de browser. Bij CSR stuurt de server een minimaal bestand en moet de browser van de bezoeker zelf de data ophalen en de pagina opbouwen. SSR is doorgaans sneller voor de eerste weergave en beter voor SEO.
Voor de bezoeker voelt de site sneller omdat de inhoud direct zichtbaar is. Echter, de server moet wel extra werk verrichten om de pagina op te bouwen, wat de ‘Time to First Byte’ (TTFB) iets kan verhogen. Met goede caching is dit verschil vaak te verwaarlozen.
Het vereist meer technische kennis en een krachtigere serverconfiguratie dan een simpele statische website. Tegenwoordig maken populaire frameworks zoals Next.js of Nuxt.js het echter een stuk eenvoudiger voor developers om SSR standaard toe te passen.
Hoewel niet verplicht, is het voor webshops die afhankelijk zijn van organisch verkeer (SEO) en een snelle mobiele ervaring zeer aan te raden. Het draagt direct bij aan een hogere conversie doordat de eerste drempel voor de klant wordt weggenomen.
Stan Classens Front-end developer
Gerelateerde begrippen
- Barter
- Churn
- Cloudflare
- Conversiepad
- Directe paginalading
- Ethisch hacker
- Feature
- First Input Delay
- H3
- Honeypot
- Lead scoring
- Link farm
- Micro-interactions
- Mobile first
- On-page optimalisatie
- Outbound marketing
- Pop-up
- Serverloze website
- Silo-structuur
- Storytelling
- Subdomein
- Total Cost of Ownership
- Visual hierarchy
- Website
