Partial Prerendering

1
import { Suspense } from 'react';
2

3
// Static shell - prerendered at build time
4
function StaticHeader() {
5
  return <header>Dashboard</header>;
6
}
7

8
// Dynamic hole - rendered at request time
9
async function DynamicUserInfo() {
10
  const user = await getCurrentUser(); // Uses cookies
11
  return <div>Welcome, {user.name}</div>;
12
}
13

14
export default function Page() {
15
  return (
16
    <div>
17
      {/* Static content - instant */}
18
      // !mark
19
      <StaticHeader />
20
      {/* Dynamic content - streams in */}
21
      // !mark
22
      <Suspense fallback={<Skeleton />}>
23
        // !mark
24
        <DynamicUserInfo />
25
      </Suspense>
26
    </div>
27
  );
28
}

Static vs Dynamic

Demo

1. Refresh the page and notice the cyan-bordered sections appear instantly.
2. Watch the pink-bordered sections stream in after 1-2 seconds.
3. Observe the loading skeletons that show while dynamic content loads.
4. Try a hard refresh (Ctrl/Cmd + Shift + R) to see the full sequence again.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Place Suspense boundaries around the smallest reasonable unit of dynamic content.
• Avoid making the entire page dynamic by calling dynamic APIs at the top level.
• Use loading skeletons that match the final content dimensions to prevent layout shift.
• Consider which content truly needs to be dynamic vs can be cached.

Continue Learning

Learn More

• Partial Prerendering
• Streaming with Suspense