javascript / intermediate
Snippet
Streaming von UI mit React Suspense
Streaming ermöglicht es, das HTML der Seite in kleinere Stücke zu zerlegen und diese schrittweise vom Server an den Client zu senden. Dies verhindert, dass langsame Datenabfragen das Rendern der gesamten Seite blockieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Suspense } from 'react';import { Skeleton } from './ui/skeleton';import SlowComponent from './components/SlowComponent';export default function Page() {return (<section><h1>Dashboard</h1><Suspense fallback={<Skeleton />}><SlowComponent /></Suspense></section>);}
nextjs
Erklärung
1
import { Suspense } from 'react';
Importiert die Suspense-Komponente, um Grenzen für das asynchrone Laden von Komponenten zu setzen.
2
<Suspense fallback={<Skeleton />}>
Definiert einen Ladezustand (das Skeleton), der angezeigt wird, während die Kind-Komponente geladen wird.