React Server Components uitgelegd: use client, Server Actions, Suspense | We.Inc
React Server Components in gewone taal: een diagram van de grens, de regels voor "use client", data ophalen, server actions voor formulieren met useActionState, streamen met Suspense en oplossingen voor veelvoorkomende fouten.
React Server Components uitgelegd
React Server Components renderen op de server en sturen kant-en-klare UI naar de browser, niet hun JavaScript. Ze kunnen direct op data wachten met await en geheimen gebruiken. Alles wat interactief is, komt in een Client Component, een bestand dat begint met "use client". Formulieren kunnen server functions aanroepen die gemarkeerd zijn met "use server", en Suspense streamt trage delen later binnen.
De drie directives en hooks die u nodig hebt
Schrijf
Betekent
(niets)
Server Component, in de Next.js App Router
"use client"
Dit bestand en zijn imports draaien ook in de browser
"use server"
Deze geëxporteerde functies draaien op de server wanneer ze worden aangeroepen
<Suspense>
Toon hier een fallback terwijl dit deel laadt
Begin met het diagram: blauwe vakken blijven op de server, oranje vakken gaan ook naar de browser. Kopieer daarna de patronen voor data, formulieren en streamen, en gebruik de fouttabel wanneer de build klaagt.
Laat componenten standaard Server Components blijven.
Haal data op in async Server Components, dicht bij de plek waar ze getoond worden.
Voeg "use client" alleen toe aan de kleine delen die state of handlers nodig hebben.
Gebruik server functions voor formulieren en mutaties, met useActionState voor feedback.
Zet trage delen in Suspense, of voeg een loading.tsx toe, zodat de pagina snel verschijnt.
Duw "use client" zo ver mogelijk naar beneden in de boom; een grens dicht bij de root maakt de hele app weer client-side.
Valideer de invoer van elke server function. Het is een publiek endpoint, ook als alleen uw formulier het aanroept.
Controleer binnen elke server function wie de gebruiker is, niet alleen op de pagina die het formulier toont.
Geef Server Components als children door aan Client Components in plaats van ze te importeren.
Voorkom watervallen van verzoeken: start onafhankelijke fetches tegelijk met Promise.all.
Veelgestelde vragen
Zijn Server Components hetzelfde als server-side rendering?
Nee. Server-side rendering maakt van elke component HTML voor de eerste keer laden en stuurt de JavaScript nog steeds mee. Een Server Component stuurt nooit zijn JavaScript mee; alleen zijn uitvoer. Client Components worden voor de eerste keer laden nog steeds op de server gerenderd.
Heb ik Next.js nodig om Server Components te gebruiken?
Ze hebben een framework of bundler nodig die ze ondersteunt. De Next.js App Router wordt het meest gebruikt; een paar andere, zoals Waku, ondersteunen ze ook.
Kan een Client Component een Server Component importeren?
Nee, een import vanuit een clientbestand trekt de module mee in de clientbundel. Geef de Server Component in plaats daarvan als children of een andere prop door vanuit een parent die een Server Component is.
Wat is het verschil tussen server actions en server functions?
React noemt elke functie die gemarkeerd is met "use server" nu een server function. Wanneer er een wordt gebruikt als form action of binnen een transition wordt aangeroepen, heet die vaak een server action. Next.js gebruikte de term server actions als eerste.
Werkt useActionState zonder JavaScript?
Het formulier post vóór hydration nog steeds naar de server function, dus het wordt verzonden. De pending-toestand en het bericht op de pagina hebben JavaScript nodig, dus zorg dat de server in beide gevallen een bruikbare pagina teruggeeft.
Waarom dit model een website helpt
Het grootste deel van een marketing- of contentpagina verandert nooit na het renderen: koppen, tekst, afbeeldingen, productkaarten. Als Server Components kosten ze helemaal geen JavaScript, wat de main thread vrijhoudt voor de paar interactieve delen en meestal Interaction to Next Paint verbetert.
Beveiligingschecklist voor server functions
Behandel elke "use server"-functie als een API-route: controleer de sessie, valideer de invoer met een schema, controleer of de gebruiker dat record mag wijzigen, en geef alleen terug wat de client nodig heeft. Geef nooit databaserijen terug met velden die de gebruiker niet mag zien.
Wat draait waar
Waar elk onderdeel kan draaien
U wilt
Server Component
Client Component
Een database of een geheime API-key lezen
Ja
Nee (zou het geheim blootgeven)
Direct in de component op data wachten met await
Ja (async component)
Nee
useState, useEffect, useReducer
Nee
Ja
onClick, onChange en andere handlers
Nee
Ja
window, localStorage, browser-API's
Nee
Ja, na mount
Nul JavaScript meesturen voor de component
Ja
Nee
Het andere soort renderen
Ja, rendert Client Components
Alleen Server Components die als children of props zijn doorgegeven
Server en Client Components
Een Server Component die data leest
In de App Router zijn componenten Server Components tenzij anders aangegeven. Ze kunnen async zijn en direct met de database praten; niets van deze code bereikt de browser.
Een Client Component voor interactie
"use client" helemaal bovenaan markeert een grens: dit bestand en alles wat het importeert wordt gebundeld voor de browser. Houd deze bestanden klein en duw ze naar de bladeren van de boom.
Een Server Component door een Client Component heen geven
Een Client Component kan geen Server Component importeren, maar kan er wel een als children ontvangen. De server rendert hem eerst en de client plaatst alleen het resultaat.
Houd geheimen per ongeluk buiten de browser
Door het pakket server-only te importeren faalt de build als een clientbestand deze module ooit importeert, zodat een API-key niet via een slordige import kan lekken.
Server functions voor formulieren
Een formulier dat naar een server function post
"use server" maakt van een async functie een endpoint dat het formulier kan aanroepen. Het formulier werkt al voordat JavaScript laadt, omdat het een echte form post is.
Pending- en resultaattoestand met useActionState
useActionState (React 19) wrapt de server function en geeft u het laatste resultaat en een pending-vlag, zodat de knop Verzenden kan tonen en het bericht kan verschijnen zonder extra state.
De paginadata verversen na een wijziging
Vertel Next.js na een mutatie welke data van welk pad verouderd is, zodat de volgende render de wijziging toont.
Streamen met Suspense
Stream het trage deel met Suspense
Zet een trage Server Component in Suspense. De rest van de pagina wordt meteen verstuurd met de fallback op zijn plek, en het trage deel stroomt binnen wanneer de data er is.
loading.tsx voor een hele route
Een loading.tsx-bestand naast page.tsx zet die pagina voor u in een Suspense-grens, zodat navigatie het direct toont terwijl de data van de pagina laadt.
Start verzoeken tegelijk
Wie in een Server Component de ene fetch na de andere afwacht, telt hun tijden bij elkaar op. Start ze tegelijk en wacht op beide.
Fouten die u tegenkomt
Veelvoorkomende fouten en de oplossing
Wat u ziet
Oorzaak
Oplossing
Een hook zoals useState werkt alleen in een Client Component
Een hook in een bestand zonder "use client"
Verplaats het interactieve deel naar een eigen bestand dat begint met "use client"
Event handlers kunnen niet aan props van een Client Component worden doorgegeven
onClick doorgegeven vanuit een Server Component
Zet de handler in de Client Component, of geef in plaats daarvan een server function door
Functies kunnen niet direct aan Client Components worden doorgegeven
Een gewone functie die als prop over de grens wordt doorgegeven
Markeer haar met "use server" als ze op de server moet draaien, of definieer haar in het clientbestand
Alleen gewone objecten kunnen aan Client Components worden doorgegeven
Class-instanties zoals modellen vol Dates of Maps die als props worden verstuurd
Geef gewone data door (strings, getallen, arrays, gewone objecten)
window is not defined
Browser-API gebruikt tijdens het renderen op de server
Lees het binnen useEffect, of controleer eerst typeof window
Hydration mismatch
Server en browser renderden verschillende tekst (datums, willekeurige waarden)
Render het veranderende deel alleen op de client, of geef de waarde door vanaf de server