Can I stream the page shell first and let the personalized slot fill in?
Next.js App Router. I want static-feeling TTFB. The page has one personalized slot below the fold and I would rather resolve it on the server than swap it in on the client.
My instinct is to wrap the slot fetch in a Suspense boundary so the shell streams first and the slot flushes when it resolves. Is that the right way to avoid blocking the whole response on the content fetch or am I missing something.
1 answer
That is the right approach. Server-side fetchContent is the recommended mode precisely because the resolved content lands in the initial HTML with no flicker and stays visible to crawlers, unlike a client hook that swaps content in after load.
Wrapping the slot fetch in a Suspense boundary is what keeps your TTFB static-feeling. The shell streams to the browser immediately, and the personalized slot flushes into the stream as soon as it resolves, so the content fetch never blocks the first byte. The streaming and prerendering guide walks through the boundary setup.
Two things to keep in mind. First, fetchContent reads the request, so the route opts into dynamic rendering once you call it, which is expected here. The server fetchContent reference covers that behavior. Second, if you use the React useContent hook instead of the server function, it suspends, so it must sit inside a Suspense boundary as well.
For a worked example of one boundary per personalized section, see streaming SSR with a Suspense boundary per slot, and for the hook-specific case useContent with Suspense and streaming.