javascript / expert
Snippet
Optimierung des Datenabrufs in Server-Komponenten mit parallelen Promises
In Next.js Server-Komponenten erzeugt das sequentielle Abwarten mehrerer asynchroner Aufrufe einen 'Wasserfall', bei dem jede Anfrage abgeschlossen sein muss, bevor die nächste beginnt. Durch das gleichzeitige Starten von Promises und deren Abwarten mit Promise.all reduzieren wir die Gesamtladezeit erheblich.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { getPosts, getCategories } from '@/lib/api';export default async function Dashboard() {// Fetching data in parallel to avoid waterfallsconst postsPromise = getPosts();const categoriesPromise = getCategories();const [posts, categories] = await Promise.all([postsPromise, categoriesPromise]);return (<div><PostList items={posts} /><CategorySidebar items={categories} /></div>);}
nextjs
Erklärung
1
const postsPromise = getPosts();
Initiiert den Abrufvorgang sofort, ohne die Ausführung zu blockieren.
2
await Promise.all([...])
Wartet darauf, dass alle Promises gleichzeitig aufgelöst werden, was den Durchsatz maximiert.