-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
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
Pre-rendered / SSR (server side rendered) stories #12542
Comments
@peterhass thanks so much for filing this and also for the research and prototyping work you've done so far. very exciting stuff! our focus for 6.1 is performance, so this could be a great fit for that theme. can you share any info (pref quantified, but qualitative fine too) about the storybook performance before and after this modification? if you submit a PR, our CI will run an automated benchmark against it.
I think specifying previewUrl in
You should be able to do this already with A few more questions:
Please let me know what you think and I'd love to figure out how to make this happen, esp if it benefits browse-time perf. |
related: we have a new package called https://github.com/storybookjs/storybook/blob/next/app/server/ |
I don't think the current preset api is sufficient for this use case. The original preview cannot be used because I need a To your questions:
Ideas on how this can improve performance?
Edit: Don't think |
One use-case we have is wanting to run https://speedcurve.com against static builds of storybook, so we can track things like CLS on a per-component basis over time. This isn't feasible currently as the stories at I hope this is useful/relevant, thanks for your time. |
One thing to add is that the project I work on is a server rendered app with react. It would be helpful to have our core ui components being rendered in the same way in storybook, to have more confidence in cases where an engineer might access a client side api incorrectly in a server context for example. It would be caught during dev on storybook and not during feature development. |
We would like this,so we can use stories in gatsby builds. |
We have a news-site running primarily as SSR. We tweak a lot of things to squeeze as much performance out of the page-render and get the best Core Web Vital scores as possible, although the SSR nature of the site isn't reflected in Storybook, which is a hassle sometimes. Testing things with vanilla JS - like banners and tracking - is one thing, but we also do a lot of async-loading of assets, which is hard to get a realworld feel for in Storybook, as everything is JS. We also had a homecooked SSR solution running as middleware, where we could render a component with something like "/ssr?id=components-accordion--story", but that broke as of 6.4 and we would prefer not to have to find a new way of hacking a solution together again :) So I'll chime in and say a built-in way of SSR components would be awesome. |
+1 |
Since 7.0 was release with Nextjs support, do you have plans for SSR storybook integration? Thank you. |
+1 |
This topic has already occurred several times without any proper solutions or discussions on how to implement this in the future.
#8009
#828
#4271
I think there is definitely a need for server side rendered stories and with some changes to the API it may be possible to create a plugin. We already created a working SSR configuration for storybook (5.xx) (react) but it uses some private functions to create a working webpack configuration. Many corners were cut to get this thing running.
https://github.com/goodhood-eu/goodhood/tree/5f0342b36186f9eccf36930d4cde53626a579b8b/.storybook
In short, it works like this:
start-storybook --preview-url=/ssr-iframe
.storybook/middleware.js
registers a custom SSR middlewarewebpackDevMiddleware
and listens to requests to/ssr-iframe
GET /ssr-iframe
we grab the compiled prerender bundle from webpack and render the requested storyThis part only uses public APIs.
The difficult part is to setup a working webpack config. To be able to do this, we access some storybook internals.
https://github.com/goodhood-eu/goodhood/blob/5f0342b36186f9eccf36930d4cde53626a579b8b/.storybook/ssr/webpack.config.js#L1
Needed public API for a plugin like this:
Would you accept a PR solving this?
The text was updated successfully, but these errors were encountered: