Wat is Incremental Static Regeneration (ISR)?
Het antwoord: delen van je website heel cachen en opnieuw laten genereren bij wijzigingen. Een combinatie van Server Side Rendering en Static Site Generation.
Met Server Side Rendering kan je op de web server HTML genereren. Met Static Site Generation genereer je alle HTML van alle pagina's in één keer. Kunnen we de web server niet statische HTML laten genereren? Het idee ISR is geboren.
Hoe werkt ISR?
ISR borduurt verder op het Static Site Generation (SSG) idee. In SSG genereer je op een build server alle HTML, CSS en JavaScript bestanden en upload je die naar een web server.
De grootste drawback van SSG is dat je de hele tijd de hele website aan het herbouwen bent. Dit kan bij grote websites qua build time best een tijd duren. Met ISR bouw je dus telkens maar één pagina opnieuw, of een deel van een pagina.
De ISR run je op de webserver zelf, of een dedicated build server. In React land betekent dit een framework kiezen die ISR support.
Wanneer zou je delen van de website opnieuw willen genereren?
Een content editor veranderd iets in het CMS zoals bijv WordPress
De klok passeert een heel uur / dag / arbitraire tijds interval.
Een externe API roept een webhook aan die de build triggered, omdat er nieuwe data is.
De database meld dat er iets in de data is gewijzigd / toegevoegd / verwijderd.
Wat de trigger ook is het volgende gebeurd nu:
De ISR web server / Next.js / Astro / @tanstack/start weet nu wat er opnieuw gebuild moet worden.
Het nieuwe HTML bestand word gegenereerd, mogelijk wordt hierbij de database / CMS geraadpleegd.
Het nieuwe HTML bestand wordt op zijn plek gezet.
Server side caches worden geleegd.
Afhankelijk van de setup is zal een eindgebruiker dus ofwel gelijk de nieuwe pagina zien of tijdelijk de oude. Je kan dit gedrag zelfs mixen en matchen. Misschien is het bij de ene pagina minder erg dan bij de oude pagina, dat je even de oude data ziet.
ISR vs SSG
Je hebt bij ISR in tegen stelling tot SSR dus wel een programeertaal runtime nodig op de webserver. Zoals bijvoorbeeld PHP, C#, Ruby of Java. Je moet immers de build kunnen uitvoeren.
Dit maakt je web server natuurlijk wel complexer, en geeft een aanvaller / hacker meer mogelijkheden / attack vectors om je site aan te kraken.
ISR is veel sneller is dan SSG qua build, zodat website meer realtime / interactiever aanvoelt. Je maakt het volgende offer: je maakt je web server configuratie complexer om zo sneller te kunnen builden.
ISR en React
Er zijn een aantal frameworks binnen het React ecosysteem die Incremental Static Regeneration ondersteunen:
Contact
Neem contact op via e-mail, phone of app, als je vragen hebt of een offerte wilt aanvragen.