Parallell, sekvensiell og strømmende datainnhenting
Optimaliser datalasting i App Router ved å hente data parallelt, forstå når sekvensiell henting er nødvendig, og strømme data med Suspense.
Parallell, sekvensiell og strømmende datainnhenting er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.
To former for datainnhenting
Server Components kan hente data sekvensielt (én venter på en annen) eller parallelt (alt samtidig). Riktig valg påvirker lastetiden betydelig.
Sekvensiell datainnhenting
Noen ganger avhenger én forespørsel av resultatet fra en annen, slik at rekkefølgen blir tvunget. Dette skaper en fossefallseffekt og går saktere.
const user = await getUser(id);
const posts = await getPosts(user.teamId); // needs user firstParallell datainnhenting
Uavhengige forespørsler bør starte samtidig. Start promise-ene, og vent deretter på dem med Promise.all.
const userP = getUser(id);
const postsP = getPosts(id);
const [user, posts] = await Promise.all([userP, postsP]);Unngå fossefall
Et utilsiktet fossefall oppstår når De bruker await på hver datainnhenting på sin egen linje, selv om de er uavhengige. Start dem før De venter på resultatene.
Strømming med Suspense
De trenger ikke vente på alt. Pakk trege deler inn i Suspense, slik at raskt innhold strømmes til brukeren med én gang.
import { Suspense } from "react";
<Suspense fallback={<Spinner />}>
<SlowComponent />
</Suspense>loading.tsx er Suspense
Den spesielle filen loading.tsx er automatisk en Suspense-grense for hele rutesegmentet, og gir en umiddelbar lastetilstand.
Finkornet strømming
Plasser flere Suspense-grenser, slik at hver seksjon vises så snart dens egne data er klare, i stedet for å blokkere på den tregeste seksjonen.
Hent data på bladnoden
I RSC kan De hente data nøyaktig der de trengs (i komponenten som bruker dem). React fjerner duplikater for identiske forespørsler, så samlokaliserte datainnhentinger er helt greit.
Memoisering av forespørsler
Next.js memorerer fetch-kall med samme URL og alternativer innenfor én enkelt rendringsrunde, slik at kall fra flere komponenter ikke treffer nettverket to ganger.
Forhåndslaste data
De kan starte en datainnhenting tidlig (med en preload-funksjon som kalles før rendring) for å overlappe nettverkstiden med rendring av andre deler.
export function preload(id) { void getUser(id); }Velge strategi
Bruk parallell og samlokalisert datainnhenting som standard. Legg til Suspense-grenser rundt trege, uavhengige seksjoner, og bruk bare sekvensiell datainnhenting når det finnes en faktisk dataavhengighet.
Kjapp kontroll
Hvordan unngår De et fossefall ved datainnhenting for to uavhengige forespørsler?
Oppsummering
De har lært å hente data parallelt med Promise.all, unngå utilsiktede fossefall og bruke Suspense (inkludert loading.tsx) til å strømme grensesnittet trinnvis. Next.js memorerer fetch-kall, så datainnhenting på samlokaliserte bladnoder er effektivt.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «Parallell, sekvensiell og strømmende datainnhenting» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Parallell, sekvensiell og strømmende datainnhenting», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.
Hva lærer jeg i «Parallell, sekvensiell og strømmende datainnhenting»?
Optimaliser datalasting i App Router ved å hente data parallelt, forstå når sekvensiell henting er nødvendig, og strømme data med Suspense. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Parallell, sekvensiell og strømmende datainnhenting»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Datainnhenting på serversiden
- Hurtigbufring og revalidering
- Parallell, sekvensiell og strømmende datainnhenting