javascript / intermediate
Snippet
Vorabruf externer Daten für Client-Komponenten
Um 'Wasserfälle' zu vermeiden, bei denen Client-Komponenten erst nach der Hydrierung mit dem Datenabruf beginnen, kann ein Promise in einer Server-Komponente initiiert und als Prop übergeben werden. Die Client-Komponente kann dann 'use()' verwenden, um es aufzulösen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
// Server Componentexport default async function Page() {const dataPromise = fetchData(); // Start fetch earlyreturn (<main><h1>Dashboard</h1><Suspense fallback={<p>Loading...</p>}><ClientChart dataPromise={dataPromise} /></Suspense></main>);}
nextjs
Erklärung
1
const dataPromise = fetchData()
Initiiert sofort einen Abruf auf dem Server, ohne hier darauf zu warten.
2
<ClientChart dataPromise={dataPromise} />
Übergibt das ausstehende Promise als Prop an eine Client-Komponente.
3
<Suspense fallback={...}>
Stellt sicher, dass die UI einen Platzhalter anzeigt, während das an den Client übergebene Promise aufgelöst wird.