How to fix Cannot use Suspense boundary without an async component in React

The mistake is almost always right next to the <code>&lt;Suspense&gt;</code> declaration. Look at the file listed in the stack trace and focus on the direct child of the boundary. If the child is a plain component like the one below, nothing inside the boundary suspends and React refuses to let it exist:

<pre><code class="language-tsx">// layout.tsx
import { Suspense } from 'react';

export default function Layout() {
return (
<Suspense fallback={<Loading />}>
<Hero /> // regular, synchronous server component
</Suspense>
);
}
</code></pre>

React throws the error before it tries to render Loading because it sees a Suspense boundary with only synchronous content.

Convert the component inside <code>&lt;Suspense&gt;</code> into an <code>async</code> server component that actually suspends by awaiting data or resources. For example:

<pre><code class="language-tsx">// components/Hero.tsx (server)
const Hero = async () => {
const res = await fetch('https://api.example.com/hero', { cache: 'no-store' });
const hero = await res.json();

return <section>{hero.title}</section>;
};

// layout.tsx
<Suspense fallback={<Loading />}>
<Hero />
</Suspense>
</code></pre>

await fetch causes React to suspend, satisfies the boundary, and React now streams the fallback until the promise resolves.

If the boundary wraps a client component, make that component asynchronous with React.lazy so the tree can suspend while the chunk loads:

<pre><code class="language-tsx">const Chart = React.lazy(() => import('./Chart'));

function Dashboard() {
return (
<Suspense fallback={<LoadingChart />}>
<Chart />
</Suspense>
);
}
</code></pre>

The promise that React.lazy returns keeps the boundary honest, and React stops throwing the error.

If there is no asynchronous work left, the easiest fix is to remove <code>&lt;Suspense&gt;</code> entirely. Keeping an unused boundary only invites this error:

<pre><code class="language-tsx">// remove Suspense when everything is synchronous
export default function Layout() {
return <Hero />; // no boundary needed when Hero renders right away
}
</code></pre>

Only wrap the tree with <code>&lt;Suspense&gt;</code> when you know it suspends (via await, data fetching helpers, or React.lazy).