Storyblok Gatsby SDK Now Supports React Server Components and Gatsby 5! 🚀
Tags: storyblok, gatsby, gatsby5, react
Published: 2023-07-14 14:33:27

We have some exciting news to share! The latest release of Storyblok's [React SDK](https://github.com/storyblok/storyblok-react) (version 2.1.0) brings two major updates that will take your web development experience to new heights. Here's what's new:

1️⃣ [React Server Components (RSC)](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) Support: We're thrilled to introduce support for React Server Components in the [Storyblok React SDK](https://github.com/storyblok/storyblok-react). Now, you can seamlessly integrate Storyblok into your apps created with the latest Gatsby 5 and lower versions of Gatsby. With RSC, you can enhance website performance.

2️⃣ [Gatsby 5](https://www.gatsbyjs.com/gatsby-5/) Support with [Partial Hydration](https://www.gatsbyjs.com/docs/conceptual/partial-hydration/): We're delighted to announce that our Storyblok [Gatsby SDK](https://github.com/storyblok/gatsby-source-storyblok) now supports [Gatsby version 5](https://www.gatsbyjs.com/gatsby-5/), complete with [Partial Hydration](https://www.gatsbyjs.com/docs/conceptual/partial-hydration/). This update brings many new features and improvements, such as an option to enable RSC and select client components to load minimal JavaScript to allow you to build better performance websites with dynamic content. Experience the power of Gatsby 5 and unleash the performance gains Partial Hydration offers.

3️⃣ Included `useStoryblokState` into `<StoryblokStory />` to keep the state for stories behind the scenes. It uses `StoryblokComponent` to render the components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function.


`src/pages/index.tsx`
```javascript
import * as React from "react"
import { graphql } from "gatsby"

import { StoryblokStory } from "gatsby-source-storyblok"

import Layout from "../components/layout"

const IndexPage = ({ data }) => {
  if (typeof data.storyblokEntry.content === "string") data.storyblokEntry.content = JSON.parse(data.storyblokEntry.content);

  return (
    <Layout>
      <StoryblokStory story={data.storyblokEntry} />{/* ⬅️ */}
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query HomeQuery {
    storyblokEntry(full_slug: { eq: "home" }) {
      content
      name
      full_slug
      uuid
      id
      internalId
    }
  }
`
```

`src/components/layout.jsx` 
```javascript
"use client";
import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
import Teaser from './Teaser'
import Grid from './Grid'
import Page from './Page'// ⬅️
import Feature from './Feature'
import configuration from '../../gatsby-config'

const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')

storyblokInit({
  accessToken: sbConfig.options.accessToken,
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    grid: Grid,
    feature: Feature,
    page: Page// ⬅️
  }
});

const Layout = ({ children }) => {
  return (
    <div>
      <main>{children}</main>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout
```

To get started, you can get started by following the steps below:

1. Install [gatsby-source-storyblok](https://github.com/storyblok/gatsby-source-storyblok)
2. Config [gatsby-config file](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/gatsby-config.ts) with [Partial Hydration flag](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/gatsby-config.ts#L4-L6)
3. [Update](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/pages/index.tsx) `src/pages/index.tsx`
4. [Import](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/pages/index.tsx#L4) `<StoryblokStory />`
5. [Parse content](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/pages/index.tsx#L9)
6. [Call](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/pages/index.tsx#L13) `<StoryblokStory />` in JSX scope
7. [Update](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/pages/index.tsx#L22) layout.jsx
8. Set “[use client](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/components/layout.jsx#L7)”
9. [Import Page component](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/components/layout.jsx#L13) (content-type)
10. [Add Page component](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/components/layout.jsx#L26) inside of `components` to initialize
11. [Create Page component](https://github.com/storyblok/gatsby-source-storyblok/blob/master/playground/src/components/Page.tsx) file


## Ready to get started? ⚡

Want to go straight to action? Clone this [Gatsby starter](https://github.com/gatsbyjs/gatsby-starter-default) and start playing around with the latest version of Gatsby! 
Or alternatively, you can refer to the example from one of our playgrounds. See our example [here](https://github.com/storyblok/gatsby-source-storyblok/tree/master/playground).

You can read all the details on what we’ve updated for Gatsby version 5 here [in the readme](https://github.com/storyblok/gatsby-source-storyblok).


## Words of appreciation

We sincerely thank Arisa ([@arisa_dev](https://twitter.com/arisa_dev)) and Alex Jover ([@alexjoverm](https://twitter.com/alexjoverm)) for their dedicated work investigating and experimenting with different approaches to bring you these flexible solutions.