feat: support React Server Components and Next app router

[edodusi]

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 the storyblokInit() function.

By copying the StoryblokComponent and Story components in the rsc module we are creating a boundary between the rsc 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 global storyblokApi variable is returning it. This is because if we rely on side effects only for useStoryblokApi() 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 and storyblokApi 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.

// lib/storyblok.ts

import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'API_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

And in components:

// app/home/component.ts

import { getStoryblokApi } from '@/lib/storyblok';

export default async function Component() {
  const { data } = await fetchData();
  
  // ...
}

export async function fetchData() {
  let sbParams: ISbStoriesParams = { version: 'draft' };

  const storyblokApi: StoryblokClient = getStoryblokApi();
  return storyblokApi.get(`cdn/stories/home`, sbParams);
}

This should not affect existing implementations. Follow the updated README for the rest of the implementation.

This would require to update the documentation on the RSC part.

[pkg-pr-new]

Open in Stackblitz

yarn add https://pkg.pr.new/@storyblok/[email protected]

commit: 23ecad3

[alvarosabu]

I will continue checking, this is only the review for this commit

[alexjoverm]

Just a few commments from my side Edo!

comments are solved

[github-actions]

🎉 This PR is included in version 4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀