Parallelle, sequentiële en gestreamde datafetching
Optimaliseer het laden van App Router-gegevens door parallel op te halen, te begrijpen wanneer sequentieel ophalen nodig is en te streamen met Suspense.
Parallelle, sequentiële en gestreamde datafetching is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.
Twee vormen van ophalen
Server Components kunnen gegevens sequentieel ophalen (de ene wacht op de andere) of parallel (allemaal tegelijk). De juiste keuze heeft grote invloed op de laadtijd.
Sequentieel ophalen
Soms is het ene verzoek afhankelijk van het resultaat van een ander verzoek, waardoor een vaste volgorde nodig is. Hierdoor ontstaat een waterval en verloopt alles trager.
const user = await getUser(id);
const posts = await getPosts(user.teamId); // needs user firstParallel ophalen
Onafhankelijke verzoeken moeten tegelijk starten. Start de promises en wacht er vervolgens op met Promise.all.
const userP = getUser(id);
const postsP = getPosts(id);
const [user, posts] = await Promise.all([userP, postsP]);Watervallen voorkomen
Een onbedoelde waterval ontstaat wanneer je elke fetch op een eigen regel await zonder dat de verzoeken afhankelijk van elkaar zijn. Start ze voordat je erop wacht.
Streamen met Suspense
Je hoeft niet op alles te wachten. Omhul trage onderdelen met Suspense, zodat snelle inhoud meteen naar de gebruiker wordt gestreamd.
import { Suspense } from "react";
<Suspense fallback={<Spinner />}>
<SlowComponent />
</Suspense>loading.tsx is Suspense
Het speciale loading.tsx-bestand is automatisch een Suspense-grens voor het hele routesegment en zorgt voor een onmiddellijke laadstatus.
Streaming op detailniveau
Plaats meerdere Suspense-grenzen, zodat elke sectie zichtbaar wordt zodra de eigen gegevens klaar zijn, in plaats van te wachten op de traagste sectie.
Ophalen bij het uiteinde
In RSC kun je gegevens precies ophalen waar ze nodig zijn (in de component die ze gebruikt). React voorkomt dubbele identieke verzoeken, dus ophalen op de plek waar het wordt gebruikt is prima.
Memoisatie van verzoeken
Next.js memoiseert fetch-aanroepen met dezelfde URL en opties binnen één renderdoorgang, zodat aanroepen in meerdere componenten niet twee keer het netwerk gebruiken.
Gegevens vooraf laden
Je kunt vroeg beginnen met ophalen (met een preloadfunctie die vóór het renderen wordt aangeroepen), zodat netwerktijd overlapt met het renderen van andere onderdelen.
export function preload(id) { void getUser(id); }Een strategie kiezen
Gebruik standaard parallel en op de plek waar de gegevens nodig zijn ophalen; voeg Suspense-grenzen toe rond trage, onafhankelijke secties; kies alleen voor sequentieel ophalen als er echt een afhankelijkheid tussen gegevens bestaat.
Korte controle
Hoe voorkom je een waterval bij het ophalen van gegevens voor twee onafhankelijke verzoeken?
Samenvatting
Je hebt geleerd om gegevens parallel op te halen met Promise.all, onbedoelde watervallen te voorkomen en Suspense (inclusief loading.tsx) te gebruiken om UI stapsgewijs te streamen. Next.js memoiseert fetches, waardoor ophalen bij het uiteinde efficiënt is.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “Parallelle, sequentiële en gestreamde datafetching” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Parallelle, sequentiële en gestreamde datafetching”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.
Wat leer ik in “Parallelle, sequentiële en gestreamde datafetching”?
Optimaliseer het laden van App Router-gegevens door parallel op te halen, te begrijpen wanneer sequentieel ophalen nodig is en te streamen met Suspense. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?
Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.
Hoe lang duurt de les “Parallelle, sequentiële en gestreamde datafetching”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?
Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Gegevens aan de serverzijde ophalen
- Caching en revalidatie
- Parallelle, sequentiële en gestreamde datafetching