Wat is Server Side Rendering (SSR)?

Het antwoord: het antwoord per request een HTML pagina genereren.

In het begin van het web waren alle pagina's statisch, iedereen zag dezelfde pagina, de HTML was voor iedereen het zelfde. Dit maakte het web nogal statisch!

Waarom niet de HTML on-demand / ad-hoc genereren? Dit opende een stortvloed aan mogelijkheden: forums, webshops, nieuwssites met commentaar, web applicaties etc. SSR is de katalysator geweest van het Web 2.0

Hoe werkt SSR?

In Server Side Rendering heb je een runtime nodig van een programmeertaal. Denk aan PHP, Java, C# en JavaScript bij elk request / verzoek van een browser run je een programma die data uit de database haalt of manipuleert.

Vervolgens maak je van deze data HTML en die verstuur je over de lijn naar de eindgebruiker zijn browser.

Schematisch ziet dat er zo uit:

Een diagram: de browser haalt HTML op van een back-end API die met de database praat.

Omdat je per request eigenlijk bepaald wat de HTML is (en zo wat de gebruiker ziet) kan je hele dynamische websites maken, maar ook web applicaties volgens het Multi Page Application MPA model.

SSR vs SSG

Met Server Side Generation genereer je statische HTML bestanden per pagina. In essentie dus je hele website van tevoren!

Dit is in sterk contrast met Server Side Rendering, hier een aantal vlakken van verschil:

  • Mogelijkheden: met SSR kan je alles maken wat je maar wilt van simpele websites tot hele interactieve websites zoals forums. Maar ook allerlei web applicaties.

    Bij SSG is realtime interactiviteit vrijwel onmogelijk.

  • Snelheid: het serveren van pure statische files is vele male sneller. Static Site Generation heeft hier dus een edge over SSR.

  • Web Server complexiteit: bij Server Side Rendering heb je een programmeertaal runtime nodig. Vergeleken met SSG is dit dus complexer.

  • Security: omdat een webserver van een SSR meer nodig heeft: denk aan een database verbinding / runtime. Zijn er ook meer aanvalshoeken voor hackers te bedenken.

SSR vs ISG

Het Incremental Static Regeneration (ISR) model is een mix van SSR en SSG.

Bij Static Site Generation bouw je telkens de hele website, bij ISG telkens een enkele pagina, of een onderdeel van een pagina. Dit kan je doen wanneer de content is veranderd, of na een bepaalde periode van caching.

ISG biedt dus een interessante mix van de snelheid van statische pagina's en de mogelijkheid tot interactiviteit van SSR.

SSR en React

Er zijn een aantal frameworks binnen het React ecosysteem die Server Side Rendering ondersteunen:

Contact

Neem contact op via e-mail, phone of app, als je vragen hebt of een offerte wilt aanvragen.

Vraag een offerte aan Boek kennismakingsgesprek