React Server Components: De Toekomst van React-ontwikkeling

React is al een krachtpatser voor het bouwen van webapplicaties gedurende de laatste tien jaar.

We hebben het allemaal zien evolueren van die lompe klassecomponenten naar de elegantie van hooks.

Maar React Server Components (RSCs)?

We denken niet dat iemand zo’n dramatische verandering verwachtte in hoe React werkte.

Dus, wat zijn precies React Server Components? Hoe werken ze? En wat doen ze anders dat React niet al kon doen?

Om al deze vragen te beantwoorden, zullen we snel de fundamenten doornemen. Als je een opfrisser nodig hebt, bekijk dan deze gids over hoe je React leert als beginner.

In deze post laten we je zien waarom we React Server Components nodig hadden, hoe ze werken en enkele van de belangrijkste voordelen van RSC’s.

Laten we beginnen!

Wat Zijn React Servercomponenten?

Denk aan React Server Components als een nieuwe manier van het bouwen van React-applicaties. In plaats van te draaien in de browser zoals typische React-componenten, worden RSC’s direct op je server uitgevoerd.

“Ik denk dat RSCs ontworpen zijn om de ‘componentisatie’ van de backend te zijn, oftewel het backend-equivalent van wat SPA React voor de frontend heeft gedaan. In theorie zouden ze grotendeels de noodzaak voor dingen zoals REST en GraphQL kunnen elimineren, wat leidt tot een veel strakkere integratie tussen de server en de client, aangezien een component de hele stack zou kunnen doorkruisen.” — ExternalBison54 op Reddit

Omdat RSCs direct op de server worden uitgevoerd, kunnen ze efficiënt toegang krijgen tot backend bronnen zoals databases en APIs zonder een extra laag voor het ophalen van gegevens.

Maar waarom hadden we überhaupt RSC’s nodig?

Om deze vraag te beantwoorden, laten we even terugspoelen.

Traditionele React: Client-Side Rendering (CSR)

React is altijd een client-side UI bibliotheek geweest.

Het kernidee achter React is om je gehele ontwerp op te delen in kleinere, onafhankelijke eenheden die we componenten noemen. Deze componenten kunnen hun eigen privégegevens (state) beheren en gegevens aan elkaar doorgeven (props).

Denk aan deze componenten als JavaScript-functies die worden gedownload en direct in de browser van de gebruiker draaien. Wanneer iemand jouw app bezoekt, downloadt hun browser alle componentcode, en React komt tussenbeide om alles te renderen:

• De browser downloadt de HTML, JavaScript, CSS, en andere bestanden.
• React analyseert de HTML, stelt eventlisteners in voor gebruikersinteracties en haalt benodigde gegevens op.
• De website verandert voor je ogen in een volledig functionele React-applicatie en alles wordt gedaan door je browser en computer.

Hoewel dit proces werkt, heeft het enkele nadelen:

• Langzame laadtijden: Laadtijden kunnen traag zijn, vooral voor complexe applicaties met veel componenten aangezien de gebruiker nu moet wachten tot alles eerst is gedownload.
• Slecht voor zoekmachineoptimalisatie (SEO): De initiële HTML is vaak heel basaal — alleen genoeg om de JavaScript te downloaden die vervolgens de rest van de code rendert. Dit maakt het moeilijk voor zoekmachines om te begrijpen waar de pagina over gaat.
• Wordt trager naarmate apps groter worden: De client-side verwerking van JavaScript kan een belasting zijn voor de bronnen, wat leidt tot een minder soepele gebruikerservaring, vooral als je meer functionaliteit toevoegt.

De Volgende Iteratie: Server-Side Rendering (SSR)

Om de problemen veroorzaakt door client-side rendering aan te pakken, heeft de React-gemeenschap Server-Side Rendering (SSR) aangenomen.

Met SSR handelt de server het renderen van de code naar HTML af voordat deze wordt verzonden.

Deze complete, gerenderde HTML wordt vervolgens overgedragen aan je browser/mobiel, klaar om bekeken te worden — de app hoeft tijdens runtime niet te worden gecompileerd zoals dat zonder SSR zou moeten.

Zo werkt SSR:

• De server genereert de initiële HTML voor elke aanvraag.
• De client ontvangt een volledig gevormde HTML-structuur, waardoor de eerste paginalading sneller is.
• De client downloadt vervolgens React en je applicatiecode, een proces genaamd “hydratatie,” wat de pagina interactief maakt.

De HTML-structuur die op de server wordt gerenderd, heeft nog geen functionaliteit. 

React voegt event listeners toe, stelt intern staatbeheer in en voegt andere functionaliteiten toe aan de HTML nadat deze naar je apparaat is gedownload. Dit proces van het toevoegen van “leven” aan de pagina staat bekend als hydratatie.

Waarom werkt SSR zo goed?

1. Snellere Initiële Laadtijden: Gebruikers zien de inhoud bijna onmiddellijk omdat de browser volledig gevormde HTML ontvangt, wat de tijd elimineert die nodig is voor het laden en uitvoeren van de JavaScript.
2. Verbeterde SEO: Zoekmachines kunnen server-gegenereerde HTML gemakkelijk crawlen en indexeren. Deze directe toegang vertaalt zich in betere zoekmachineoptimalisatie voor je applicatie.
3. Verbeterde Prestaties op Langzamere Apparaten: SSR verlicht de belasting op het apparaat van een gebruiker. De server neemt het werk over, waardoor je applicatie toegankelijker en performanter wordt, zelfs op langzamere verbindingen.

SSR veroorzaakte echter een aantal extra problemen, waardoor een nog betere oplossing nodig was:

• Trage Tijd tot Interactief (TTI): Server-side rendering en hydratatie vertragen de mogelijkheid van de gebruiker om de app te zien en ermee te interageren tot het hele proces voltooid is.
• Serverbelasting: De server moet meer werk verrichten, wat de responstijden vertraagt voor complexe applicaties, vooral wanneer er veel gebruikers tegelijk zijn.
• Complexiteit van de opzet: Het opzetten en onderhouden kan complexer zijn, vooral bij grote applicaties.

Eindelijk, de React Servercomponenten

In december 2020 introduceerde het React-team de “Zero-Bundle-Size React Server Components” of RSCs.

Dit veranderde niet alleen hoe we dachten over het bouwen van React-apps, maar ook hoe React-apps achter de schermen werken. RSC’s losten veel problemen op die we hadden met CSR en SSR.

“Met RSC’s wordt React een volledig server-side Framework en een volledig client-side Framework, wat we nog nooit eerder hebben gehad. En dat maakt een veel nauwere integratie tussen de server- en clientcode mogelijk dan ooit tevoren.” — ExternalBison54 op Reddit

Laten we nu kijken naar de voordelen die RSCs met zich meebrengen:

1. Nul Bundelgrootte

RSC’s worden volledig op de server gerenderd, waardoor het niet nodig is om JavaScript-code naar de client te sturen. Dit resulteert in:

• Aanzienlijk kleinere JavaScript-bundelgroottes.
• Snellere paginaladingen, vooral op tragere netwerken.
• Verbeterde prestaties op minder krachtige apparaten.

In tegenstelling tot SSR, waarbij de gehele React-componentenboom naar de client wordt gestuurd voor hydratatie, houden RSC’s server-only code op de server. Dit leidt tot die aanzienlijk kleinere client-side bundels waar we het over hadden, waardoor je applicaties lichter en responsiever worden.

2. Directe Toegang tot de Backend

RSC’s kunnen direct communiceren met databases en bestandssystemen zonder dat een API-laag nodig is.

Zoals je in de onderstaande code kunt zien, wordt de variabele courses rechtstreeks uit de database opgehaald, en de UI toont een lijst van de course.id en course.name uit de courses.map:

async function CourseList() {
  const db = await connectToDatabase();
  const courses = await db.query('SELECT * FROM courses');

  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>{course.name}</li>
      ))}
    </ul>
  );
}

Dit is eenvoudiger in vergelijking met traditionele SSR waar je aparte API-routes zou moeten instellen voor het ophalen van individuele gegevens.

3. Automatische Codesplitsing

Met RSCs krijg je ook meer gedetailleerde codeverdeling en betere codeorganisatie.

React houdt code die alleen voor de server is op de server en zorgt ervoor dat deze nooit naar de client wordt gestuurd. De clientcomponenten worden automatisch geïdentificeerd en naar de client gestuurd voor hydratatie.

En het totale pakket wordt extreem geoptimaliseerd omdat de klant nu precies ontvangt wat nodig is voor een volledig functionele app.

Aan de andere kant vereist SSR zorgvuldige handmatige codeverdeling om de prestaties voor elke extra pagina te optimaliseren.

4. Verminderd Watervaleffect en Streaming Rendering

React Server Components combineren streaming rendering en parallelle gegevensophaling. Deze krachtige combinatie vermindert aanzienlijk het “watervaleffect” dat vaak wordt gezien bij traditionele server-side rendering.

Watervaleffect

Het “watervaleffect” vertraagt de webontwikkeling. Het dwingt de operaties in wezen elkaar op te volgen alsof een waterval over een reeks rotsen stroomt.

Elke stap moet wachten tot de vorige is voltooid. Dit “wachten” is vooral merkbaar bij het ophalen van gegevens. Eén API-oproep moet worden voltooid voordat de volgende begint, waardoor de laadtijden van de pagina vertragen.

Streaming Rendering

Streaming rendering biedt een oplossing. In plaats van te wachten tot de hele pagina op de server is gerenderd, kan de server stukken van de gebruikersinterface naar de client sturen zodra ze klaar zijn.

React Server Components maken het renderen en ophalen van gegevens veel soepeler. Het creëert meerdere servercomponenten die parallel werken en zo het watervaleffect vermijden.

De server begint HTML naar de client te sturen zodra een deel van de gebruikersinterface klaar is.

Dus, vergeleken met server-side rendering, resulteren RSC’s in:

• Sta elk onderdeel toe zijn gegevens onafhankelijk en parallel op te halen.
• De server kan een component streamen zodra de gegevens ervan klaar zijn, zonder te wachten tot andere componenten bij zijn.
• Gebruikers zien de inhoud één voor één laden, wat hun perceptie van prestatie verbetert.

5. Soepele Interactie Met Klantonderdelen

Nu betekent het gebruik van RSC’s niet noodzakelijkerwijs dat je client-side componenten moet overslaan. 

Beide componenten kunnen naast elkaar bestaan en helpen je een geweldige algehele app-ervaring te creëren.

Denk aan een e-commerce applicatie. Met SSR moet de hele app aan de serverkant worden gerenderd.

In RSCs kun je echter selecteren welke componenten op de server worden gerenderd en welke aan de klantzijde.

Bijvoorbeeld, je kunt servercomponenten gebruiken om productgegevens op te halen en de initiële productlijstpagina te renderen.

Vervolgens kunnen clientcomponenten gebruikersinteracties afhandelen, zoals het toevoegen van items aan een winkelwagen of het beheren van productrecensies.

Moet Je RSC Implementatie Toevoegen Aan Je Roadmap?

Ons oordeel? RSCs voegen veel waarde toe aan React-ontwikkeling.

Zij lossen enkele van de meest dringende problemen op met de SSR- en CSR-benaderingen: prestaties, gegevens ophalen en ontwikkelaarservaring. Voor ontwikkelaars die net beginnen met coderen, heeft dit het leven gemakkelijker gemaakt.

Moet je nu RSC-implementatie aan je roadmap toevoegen? We moeten wel met het gevreesde — het hangt ervan af gaan.

Je app werkt misschien perfect zonder RSCs. En in dit geval kan het toevoegen van een extra abstractielaag niet veel uitmaken. Echter, als je van plan bent om te schalen en denkt dat RSCs de gebruikerservaring voor je app kunnen verbeteren, probeer dan kleine veranderingen te maken en van daaruit te schalen.

En als je een krachtige server nodig hebt om RSC’s te testen, start dan een DreamHost VPS.

DreamHost biedt een volledig beheerde VPS-service waar je zelfs je meest veeleisende apps kunt implementeren zonder je zorgen te maken over het onderhouden van de server.