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/
Top comments (2)
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.
Good point, with RSC a lot of frameworks and tools of the frontend ecosystem will need to adapt