DEV Community

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

Posted on

4

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
}
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/

Top comments (2)

Collapse
 
bakeerik profile image
BakerErik • Edited

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.

Collapse
 
heymarkkop profile image
Mark Kop

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay