Wie funktioniert Suspense beim Datenholen, und wie nutzt du es in React 19?

Eine Komponente suspendiert, wenn sie ein Promise liest, das noch nicht aufgelöst ist. React geht hoch bis zur nächsten Suspense-Boundary, zeigt deren Fallback, bis das Promise durch ist, und rendert dann den echten Inhalt. In React 19 liest du ein Promise mit dem use-Hook, üblicherweise erzeugt in einer Server Component oder einem Cache und nach unten gereicht. Suspense koordiniert Ladezustände, es holt selbst keine Daten.

Suspense ist ein Koordinations-Primitiv, keine Datenschicht. Liest eine Komponente ein Promise, das noch nicht aufgelöst ist, suspendiert sie, React findet die nächste Boundary darüber, rendert deren Fallback und versucht den Teilbaum erneut, sobald das Promise durch ist. In React 19 liest man eins mit dem use-Hook, und die wichtige Regel ist, dass das Promise nicht während des Renders der Komponente entstehen darf, die use aufruft, sonst baust du bei jedem Versuch ein frisches Promise, und es löst nie auf. In der Praxis startet das Promise also in einer Server Component oder kommt aus einem Cache und wird nach unten gereicht. Serverseitig passt das zum Streaming: Die Shell geht sofort raus, und langsamere Bereiche streamen nach, sobald ihre Daten da sind. Bei der Platzierung versuche ich, das Kleinste einzupacken, für das ein User ein Skeleton akzeptieren würde, damit ein langsames Empfehlungs-Panel nicht die Produktdetails aufhält. Die Falle sind sequenzielle awaits, die einen Waterfall erzeugen, ich stoße unabhängige Fetches also gemeinsam an, bevor ich sie awaite.