javascript / intermediate
Snippet
Parallele Datenabfrage in Server-Komponenten
Indem mehrere Abfragen ohne 'await' gestartet und anschließend mit Promise.all kombiniert werden, vermeidet man 'Waterfalls' (sequenzielle Abfragen). Dies reduziert die Gesamtladezeit einer Next.js-Seite erheblich.
snippet.js
1
2
3
4
5
6
7
8
export default async function Page({ params }) {const userData = getUser(params.id);const postsData = getPosts(params.id);const [user, posts] = await Promise.all([userData, postsData]);return <div>{user.name} has {posts.length} posts</div>;}
nextjs
Erklärung
1
const userData = getUser(params.id)
Startet den Promise sofort, ohne die nächste Zeile zu blockieren.
2
await Promise.all([userData, postsData])
Wartet darauf, dass alle gestarteten Anfragen gleichzeitig abgeschlossen werden.