Storyblok Gatsby SDK Now Supports React Server Components and Gatsby 5! 🚀

We have some exciting news to share! The latest release of Storyblok's React SDK (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) Support: We're thrilled to introduce support for React Server Components in the Storyblok React SDK. 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 Support with Partial Hydration: We're delighted to announce that our Storyblok Gatsby SDK now supports Gatsby version 5, complete with 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

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

"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
2. Config gatsby-config file with Partial Hydration flag
3. Update src/pages/index.tsx
4. Import <StoryblokStory />
5. Parse content
6. Call <StoryblokStory /> in JSX scope
7. Update layout.jsx
8. Set “use client”
9. Import Page component (content-type)
10. Add Page component inside of components to initialize
11. Create Page component file

Ready to get started? ⚡

Want to go straight to action? Clone this Gatsby starter 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.

You can read all the details on what we’ve updated for Gatsby version 5 here in the readme.

Words of appreciation

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