Servercomponenten zijn UI-bouwblokken die op de server draaien in plaats van in de browser van je bezoeker. Ze halen data op, stellen de pagina samen en sturen afgewerkte HTML door. De browser krijgt een kant-en-klaar resultaat in plaats van een stapel JavaScript die hij eerst moet downloaden en uitvoeren.
Stel je een bureau voor dat je zelf in elkaar moet zetten tegenover eentje dat compleet gemonteerd binnenkomt. Een klassieke clientcomponent is het bouwpakket: de browser krijgt alle onderdelen en moet de pagina zelf bouwen. Een servercomponent komt al opgebouwd binnen, dus de bezoeker ziet sneller content en de telefoon doet minder werk. Dit past natuurlijk bij server-side rendering en vermindert de hydratatie die nodig is, omdat alleen de echt interactieve delen als code worden meegestuurd.
Doordat een servercomponent draait waar je database staat, kan hij data direct opvragen zonder een API naar buiten open te zetten. Dat houdt ook geheimen zoals sleutels en tokens weg van de front-end, waar iedereen ze zou kunnen lezen. Een productlijst kun je bijvoorbeeld op de server ophalen en renderen, terwijl alleen de knop ‘in winkelmandje’ als clientcode wordt verstuurd.
De keerzijde: servercomponenten kunnen niet op zichzelf met browserdingen zoals klik-acties of lokale state werken. Echte apps mengen daarom beide: servercomponenten voor structuur en data, kleine clientcomponenten voor de interactie. De juiste verdeling vraagt wat inschatting, want te veel als client markeren gooit de snelheidswinst weer weg. Als vuistregel wordt alles wat een klik-actie, state of een browser-API nodig heeft een clientcomponent, en blijft de rest op de server.
Bij TopDevs grijpen we naar servercomponenten als de site van een klant veel data toont maar weinig interactie heeft, want minder JavaScript houdt pagina’s snel op elk apparaat.
