How to use React Server Components components on Storybook 8
Mark Kop

Mark Kop @heymarkkop

About: A fullstack developer inspired by learning and sharing. (him/he)

Location:
Florianópolis, Santa Catarina, Brasil
Joined:
Aug 24, 2019

How to use React Server Components components on Storybook 8

Publish Date: May 21 '24
4 2

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Comments 2 total

  • BakerErik
    BakerErikMay 22, 2024

    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
      Mark KopMay 27, 2024

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

Add comment