Hoe maak je een website met statische content dynamisch?

Richard van Willegen is lead front-end developer bij Oberon en heeft een aantal technologieën met elkaar vergeleken om tot de beste keuze te komen voor VVV Texel.

Uitgangspunten: Websites moeten snel zijn. Ze moeten snel laden en snappy werken. Dit verbetert de gebruikerservaring en resulteert in een betere Google score.

Hierdoor is Oberon een voorstander van het gebruik van Static Rendering. Hiermee worden pagina's van te voren (tijdens build time) naar platte HTML gegenereerd, zodat deze zonder server tijd door de browser gedownload kunnen worden. Zodra de eerste pagina geladen is, wordt de javascript uitgevoerd en gaat de pagina verder als Single Page Application (SPA), wat de beste gebruikservaring en snelheid geeft na de initial page load.

Voordelen van Static Pages ten opzichte van SSR

Een andere techniek die Oberon vaak inzet is Server Side Rendering (SSR). Hierbij worden de pagina's per gebruiker request gegenereerd. Hierbij heb je dus wel server tijd, maar dit kan zo zijn voordelen hebben.

Wat zijn precies de voor -en nadelen van Static pages t.o.v. SSR?

• Geen server tijd per request, dus snellere page loads.
• Hogere stabiliteit (er kunnen geen server-side errors optreden bij een request).
• Geen last van spikes (trage page loads of zelfs downtime bij drukte).

En de nadelen

• Pagina's zijn mogelijk niet up to date met de laatste wijzigingen in de data.
• Hogere build tijden: hoe meer static pagina's er zijn, hoe langer de build duurt, waardoor het langer duurt om een nieuwe versie van de site live te zetten. Dit geldt ook voor de testomgeving.
• Verhoogde complexiteit in development (pagina's op dynamische URLs moeten programmatisch gegenereerd worden).

Deze voor -en nadelen zijn van toepassing op de initial page load. Nadat de eerste pagina geladen is, zal bij beide methodes de site verder als SPA in de browser runnen, waarbij er slechts minimale JSON data opgehaald wordt wanneer de gebruiker navigeert.

Voor VVV Texel maakt Oberon een website met veel statische content, denk aan artikelen over Texel, maar ook de mogelijkheid om vakantiehuisjes te boeken. De boekingspagina's hebben wel de eis dat ze dynamisch zijn. Hoe kan je dit combineren, zodat het beste van Static pages en SSR op een website is in te zetten?

Conclusie

Hier biedt Next.js de oplossing.

De nadelen van Static pages zijn voor een groot deel af te vangen doordat er met Next.js makkelijk Static pages gecombineerd kan worden met SSR. Pagina's die erg dynamisch zijn kan je via SSR laten renderen. Dit zal wat performance overhead hebben voor initial page loads van die pagina's, maar dan heb je wel altijd up to date data. Er is ook nog de optie om static pages na een request te laten regenereren, via de 'revalidate' optie. De gebruiker krijgt dan gewoon direct de static page, maar de server gaat op de achtergrond de static page opnieuw bouwen, zodat de volgende gebruiker meer up to date content krijgt. Je kunt instellen hoe snel na elkaar de pagina opnieuw gegenereerd mogen worden, dus bijvoorbeeld maximaal 1 keer per minuut. Zo houd je snelle laadtijden en zorg je dat vaak bezochte pagina's niet erg outdated worden. Als een pagina niet vaak bezocht wordt, wordt deze dan ook niet opnieuw gegenereerd, dus is het alsnog goed om bijvoorbeeld elke nacht alle static pages opnieuw te bouwen.

Naar verwachting zal de hoeveelheid static pages voor de site van VVV Texel te overzien zijn. Het is niet altijd een probleem dat een build lang duurt, hoewel dit tijdens development en testing wat vertraging kan leveren als dit echt te hoog wordt, maar dan kan evt. op die omgevingen ingesteld worden dat daar de pagina's niet allemaal static gebouwd worden.

Next.js heeft een nette API om het genereren van static pages makkelijk te maken. De verhoogde complexiteit van de programmatuur zal daardoor meevallen.