Eilandarchitectuur is een manier om een webpagina te bouwen waarbij het grootste deel gewone, statische HTML is en slechts kleine stukjes interactief zijn. Die interactieve stukjes, de ‘eilanden’, zijn de enige delen die JavaScript laden. Alles eromheen blijft snelle, lichte markup.
Stel je een kalme zee van statische content voor met hier en daar een eilandje activiteit: een zoekvak hier, een afbeeldingencarrousel daar, een winkelmandknop in de hoek. De zee laadt meteen, want het is gewoon HTML. Alleen de eilanden hebben een bootje nodig, oftewel hun eigen JavaScript, en dat krijgen ze los van elkaar via partiële hydratatie in plaats van de hele pagina in één keer wakker te maken. Dit is het kernidee achter Astro, dat het patroon zijn standaard maakte.
De winst is snelheid zonder de interactiviteit op te geven. Een klassieke single-page app stuurt één grote bundel en laat de browser zwaar werk doen voordat er iets reageert. De eilandaanpak stuurt veel minder code, dus pagina’s voelen snel en de Core Web Vitals blijven gezond, iets wat zoekmachines belonen. Het houdt een codebase ook eerlijk. Elk eiland is een op zichzelf staand stuk dat je los kunt begrijpen, dus een traag of kapot onderdeel kan de hele pagina niet meeslepen. Toch past het patroon niet overal. Een app die van rand tot rand interactief is, zoals een live dashboard of een online editor, heeft weinig stille zones om statisch te houden, dus een klassieker hydratatie-aanpak bedient die vaak beter. Eilanden komen tot hun recht als het grootste deel van het scherm content is en maar een handvol plekken echt hoeft te bewegen.
Bij TopDevs gebruiken we eilandarchitectuur voor sites die om content draaien, en houden we pagina’s snel door interactiviteit alleen te laden waar een bezoeker hem echt nodig heeft.
