feat: support React Server Components and Next app router #1201
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This proposal aims to solve #952 by reorganizing the exports that we have in our
react/rsc
module and making a slightly impactful change on thestoryblokInit()
function.By copying the
StoryblokComponent
andStory
components in thersc
module we are creating a boundary between thersc
and the rest, ensuring proper isolation. Ideally we don't want to have duplicated code and this would need some refactoring in the future.The most significant change is in the
storyblokInit()
function, which now instead of just setting the globalstoryblokApi
variable is returning it. This is because if we rely on side effects only foruseStoryblokApi()
we may fall into race conditions, especially in RSC where the context is not shared between client and server and we don't have a state, every new component is rendered from scratch andstoryblokApi
could be uninitialized.So for every new render, client or server, if we have the
storyblokApi
initialized then we can return it, otherwise we need a new server side call to initialize it.This results in a small change for the clients implementing this SDK:
storyblokInit()
now returns the API object that components need to fetch data.Here's an example of a client implementation.
And in components:
This should not affect existing implementations.
StoryblokProvider
stays the same, for client components.This would require to update the documentation on the RSC part.