Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NextJS: Add experimental RSC support #25091

Merged
merged 12 commits into from
Dec 5, 2023
Merged

NextJS: Add experimental RSC support #25091

merged 12 commits into from
Dec 5, 2023

Conversation

shilman
Copy link
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
Contributor

@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!

code/frameworks/nextjs/src/rsc/decorator.tsx Outdated Show resolved Hide resolved
code/frameworks/nextjs/README.md Show resolved Hide resolved
@shilman shilman marked this pull request as ready for review December 4, 2023 17:21
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