Storybook Preview ↔ Next.js App Router: Rendering Server Components Without a Client Boundary?

The Short Answer

No, Storybook cannot natively render React Server Components (RSC) without a client boundary. Because Storybook's preview iframe operates as a client-side Single Page Application (SPA), it lacks the Node.js runtime and the RSC stream protocol handler required to execute server-side logic and resolve server-only modules.

Technical Explanation

The disconnect exists because of how the Next.js App Router separates the server and client runtimes. In a production or dev Next.js environment, the server executes the RSC logic and sends a specialized serialized payload to the browser. Storybook, however, uses its own builder (Vite or Webpack) to bundle components directly for the browser.

Why Proxying is Not a Standard Solution

While it is theoretically possible to configure a builder to proxy requests to a live Next.js server, this is not a first-class feature of Storybook for several reasons:

• Environment Mismatch: Server components often rely on server-side globals and filesystem access that do not exist in the Storybook iframe.
• Build-time Stability: Importing server-only modules into a client-side bundle triggers build errors, as the bundler attempts to resolve Node.js internals for the browser.
• Runtime Overhead: Relying on a live server for previews introduces significant latency and removes the "isolated" nature of Storybook stories.

Recommended Implementation Path

To preview components designed as Server Components without polluting your production code with 'use client', use the Pattern Separation approach:

1. Extract a Presentational Component: Move the UI logic into a "dumb" client component that accepts data as props.
2. Create a Server Wrapper: Use the Server Component to handle data fetching and pass the result to the presentational component.
3. Storybook Target: Point your Storybook stories at the presentational component and mock the data props.

// PresentationalComponent.tsx (Client-safe)
export const UserProfile = ({ name, email }) => <div>{name} - {email}</div>;

// ServerComponent.tsx (RSC)
export default async function UserPage() {
  const user = await db.user.findFirst();
  return <UserProfile name={user.name} email={user.email} />
}

Verification

To confirm your component is correctly isolated, attempt to import a module marked with import 'server-only' into a Storybook story. The builder should throw a module resolution error, confirming that the preview environment is strictly client-side.

Diagnostic Detail Needed: Are you using a specific Storybook addon for Next.js (such as @storybook/nextjs), and which version of Next.js is currently implemented?