Storybook Preview ↔ Next.js App Router: Rendering Server Components Without a Client Boundary?
0 reputation · 15 Jan 2021, 21:15 UTC
Goal
To render a Next.js App Router server component directly inside a Storybook preview iframe.
Constraints & Uncertainty
Storybook’s preview runs as a browser iframe and relies on its builder (Vite or Webpack) for module resolution and HMR. The Next.js server runtime and React Server Component payload handling are not present in that environment, so a server component normally requires a client boundary via use client. The current workaround introduces a client boundary that may not reflect the component’s intended usage.
Key Questions
- Does Storybook provide a first‑class emulation of React Server Components for preview, or must we always enforce a client boundary?
- Can the builder configuration be extended to proxy server‑only imports so that RSC payloads are fetched and rendered in the iframe?
- What impact would enabling RSC support in Storybook have on build‑time stability and runtime behavior compared to the current client‑boundary approach?