Client-side rendering (CSR) betekent dat een webpagina volledig of gedeeltelijk wordt gerenderd aan de clientzijde, wat betekent dat de browser de pagina opbouwt. In React.js resulteert dit in een snel en soepel gebruikerservaring omdat alleen bepaalde delen van de pagina die moeten worden gewijzigd, opnieuw worden gerenderd, in plaats van de hele pagina.
Wanneer je als eerste een React-applicatie opent, ontvangt je browser een HTML-bestand met een leeg div-element en een link naar een JavaScript-bundelbestand. Deze bundel bevat alle code die nodig is om je applicatie aan de clientkant te renderen.
Daarna laadt de browser het JavaScript-bundelbestand en React gaat aan de slag met het aanmaken en toevoegen van je React-componenten aan die lege div. React houdt ook een virtueel DOM bij (een lichte kopie van het eigenlijke DOM), en wanneer er wijzigingen plaatsvinden in de toestand van de applicatie, zorgt React ervoor dat deze wijzigingen zo efficiënt mogelijk in het echte DOM worden weerspiegeld.
Het enige nadeel is de tijd die nodig is om het bundelbestand te downloaden en de app voor de eerste keer te renderen. Het kan langer duren, vooral bij grotere apps. Dit kan je oplossen door middel van server-side rendering of met technieken zoals code splitting en lazy loading.
In het kort, client-side rendering in React.js staat voor het dynamisch invullen en updaten van inhoud in de browser door gebruik te maken van JavaScript en het bekende concept “single-page application (SPA)”.
U kunt hier meer over leren in de officiële ReactJS-documentatie.
