[React](/courses/reactjs) Suspense lets [Next.js](/courses/nextjs) show fallback UI while an [asynchronous](/javascript/promises-asynchronous-javascript) component is waiting for data or other server work to complete. This works naturally with [async](/javascript/promises-asynchronous-javascript) [Server Components](/courses/nextjs). ### Async Server Component ```tsx async function Revenue() { const revenue = await getRevenue(); return (

Revenue

{revenue}

); } ``` The component cannot finish rendering until: ```javascript await getRevenue(); ``` resolves. ### Wrap It in Suspense ```tsx import { Suspense } from 'react'; export default function Dashboard() { return (

Dashboard

Loading revenue...

); } ``` While `Revenue` waits, [React](/courses/reactjs) can show: ```text Dashboard Loading revenue... ``` When the data is ready, the fallback is replaced by the real Revenue component. ### Keep Data Fetching Inside the Suspended Component Consider this: ```tsx export default async function Dashboard() { const revenue = await getRevenue(); return ( }> ); } ``` The Suspense boundary cannot help with the wait that already happened before React reached it. A better structure is: ```tsx export default function Dashboard() { return ( }> ); } ``` where `Revenue` performs the slow operation itself. ### Why Boundary Placement Matters Suspense only controls asynchronous work beneath that boundary. Conceptually: ```text Slow await ABOVE Suspense → boundary cannot hide that wait Slow await INSIDE Suspense subtree → fallback can be shown ``` ### Multiple Independent Components ```tsx }> }> ``` This allows each section to finish independently. ### Interview-Ready Answer Wrap an async Server Component in `` when its server work may take time. Keep the slow data access inside the component underneath the Suspense boundary; otherwise the parent may block before the fallback can render. Multiple boundaries allow independent parts of a page to become available separately.