Begrip: React Server Components

React Server Components (RSC) zijn componenten die enkel op de server uitgevoerd kunnen worden en eventueel asynchroon zijn. Omdat een server component op de server uitgevoerd wordt, kan zo'n component gebruikt worden om een database of bestandssysteem aan te spreken voordat er iets naar de client gestuurd wordt. Hierdoor zijn er minder HTTP request nodig dan bij een SPA, het ophalen van de HTML en de data gebeurt in één keer in de plaats van in twee aparte stappen.

Omdat een RSC enkel op de server uitgevoerd wordt, is het niet mogelijk om hooks zoals useState of useEffect te gebruiken, deze zijn namelijk afhankelijk van de client/de acties van een gebruiker en steunen eventueel op browser API's die natuurlijk niet beschikbaar zijn op de server.

De JSX-code die gegenereerd wordt in een server component moet serialiseerbaar zijn. Dit betekent dat het onmogelijk is om functies (event handlers) te koppelen in een server component. Serialisatiefuncties zoals JSON.stringify verwijderen functies namelijk uit objecten als deze geconverteerd worden naar een JSON-bestand.

Dit betekent niet dat we geen functies kunnen oproepen of gebruiken in een RSC. Zolang deze niet gekoppeld worden aan een JSX-element, maar gebruikt worden om te bepalen welke JSX-code er gerenderd moet worden is er geen probleem.

Binnen Next.js is elke component per default een server component, een component met hooks of event handlers moet expliciet aangeduide worden als een client component via het 'use client' directive.