suspense-patterns

Place React Suspense boundaries by grouping independent data fetches at the same tree level to preserve parallel fetching, and wrap updating components separately to prevent fallback flicker during re-renders.

Your Next.js App Router loading state gets stuck because Suspense boundaries must be paired with ErrorBoundary components; without an ErrorBoundary, a thrown Promise rejection during streaming leaves the UI suspended indefinitely instead of rendering the fallback error UI.

Keep previously-rendered content visible by wrapping data fetches in startTransition or useTransition; this separates non-urgent updates, allowing React to show the current page while the new data resolves instead of flashing a Suspense fallback.

The React 19 use hook integrates with Suspense by allowing components to unwrap thrown promises directly; apply boundary placement rules to handle use(promise) patterns across Server and Client component setups, ensuring streaming works without layout regressions.

Avoid using a Suspense boundary for code-splitting when it encloses sections with critical SEO content or when it groups components with different loading granularities, as this causes unnecessary layout shifts and delays interactive elements while waiting for the slowest chunk.