How do Suspense fallbacks work with cached components in Next.js?

In Next.js 16 with cache components, if I have a component with 'use cache' wrapped in Suspense, will the fallback show on every request? Or does the cached response mean no fallback is shown for subsequent requests? What about statically generated pages - do they show Suspense fallbacks?

Perfect! I now have a comprehensive understanding. Let me create a detailed answer based on what I've found in the source code and documentation.

##Summary

Based on my analysis of the Next.js 16 codebase and documentation, here are the key points about how 'use cache' interacts with Suspense fallbacks:

###Suspense Fallbacks with Cached Components

1. First Request Behavior: When a component with 'use cache' is wrapped in Suspense and hasn't been cached yet:

• The fallback WILL show on the first request
• The cached component will execute and populate the cache
• Once done, the actual content replaces the fallback

2. Subsequent Requests: Once the cache is populated:

• The fallback will NOT show on subsequent requests
• Next.js will serve the cached result from memory
• The content appears immediately without triggering the Suspense boundary

This is documented in the official Next.js documentation, specifically in the glossary definition of "Static Shell":

The pre-rendered HTML structure of a page that's served immediately to the browser. With Partial Prerendering, the static shell includes all statically renderable content plus Suspense boundary fallbacks for dynamic content that streams in later.

###Static/Pre-rendered Pages

For statically generated pages with 'use cache':

• During build time: The entire page (including the cached component) is prerendered
• The fallback UI is NOT included in the static HTML - only if the cache couldn't be populated during prerendering
• At request time: Subsequent requests receive the fully cached content with no fallback shown

From the cache components documentation:

"The fallback becomes part of the static shell while the actual content resolves at request time."

And more specifically:

"During prerendering the header (static) and the blog posts fetched from the API (cached with use cache), both become part of the static shell along with the fallback UI for user preferences. When a user visits the page, they instantly see this prerendered shell with the header and blog posts."

###Key Pattern

Here's the recommended pattern from the official documentation:

// ✅ CORRECT: Cache component with Suspense
export default function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <CachedContent />
    </Suspense>
  )
}

async function CachedContent() {
  'use cache'
  cacheLife('hours')
  
  const data = await fetch('...')
  return <div>{data}</div>
}

What happens:

1. First request: Fallback shows briefly, cache populates
2. Subsequent requests: Cached data served immediately, no fallback

In static generation: The component and its cache are built at build time, so users never see the fallback on production - they get the fully rendered page instantly.

###Configuration Required

This feature requires enabling cacheComponents in your next.config.js:

const nextConfig = {
  cacheComponents: true,
}
module.exports = nextConfig