How to use React Server Components components on Storybook 8

Let's say you have a NextJS page that uses React Server Components (RSC) and you have to use the async keyword when exporting that page

// app/page.js
export default async function Home() {
  const { clients } = await getHomeContent()
  // ...code that displays clients cards on the home page
}

If you try to import this component/page into Storybook 8, you will get this error:
async/await is not yet supported in Client Components, only Server Components

To get around it, simply enable the experimentalRSC flag on .storybook/main.js

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  features: {
    experimentalRSC: true,
  },
  // ...other configs
}
export default config

Read more about it here:
https://storybook.js.org/blog/storybook-react-server-components/

Comments

[BakerErik]

One of the most impacted areas is component-driven development and testing. Tools like Storybook, Testing Library, and Playwright/Cypress Component Testing all assume that the user’s components are being rendered in the browser (or JSDom). But with math tuition online server components, that’s no longer the case.

[Mark Kop]

Good point, with RSC a lot of frameworks and tools of the frontend ecosystem will need to adapt