Skip to content

NextJS: Add experimental RSC support#25091

Merged
shilman merged 12 commits into
nextfrom
shilman/add-rsc
Dec 5, 2023
Merged

NextJS: Add experimental RSC support#25091
shilman merged 12 commits into
nextfrom
shilman/add-rsc

Conversation

@shilman
Copy link
Copy Markdown
Member

@shilman shilman commented Dec 3, 2023

Closes #21540

What I did

Turns out that in NextJS's version of React, it's possible to render async components in the client using React Suspense.

export default {
  component: MyServerComponent,
  decorators: [(Story) => <Suspense><Story /><Suspense />]
}

To make this ergonomic for NextJS users, I:

  • Added an experimental feature flag experimentalNextRSC to add RSC support
  • Added a parameter nextjs.rsc to selectively disable RSC on stories/components
  • Updated the README with basic documentation on how to use the feature

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

Run the NextJS sandbox and view the sample stories. Observe that both the basic & nested stories work, and that the intentionally erroring stories error in reasonable ways.

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

@shilman shilman added feature request react nextjs ci:merged Run the CI jobs that normally run when merged. labels Dec 3, 2023
@shilman shilman changed the title NextJS: Add RSC support NextJS: Add experimental RSC support Dec 4, 2023
Copy link
Copy Markdown
Member

@kasperpeulen kasperpeulen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Comment thread code/frameworks/nextjs/src/rsc/decorator.tsx Outdated
Comment thread code/frameworks/nextjs/README.md
@shilman shilman marked this pull request as ready for review December 4, 2023 17:21
Comment thread code/lib/types/src/modules/core-common.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:merged Run the CI jobs that normally run when merged. feature request nextjs react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Support React Server Components (RSC)

2 participants