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:
- Install gatsby-source-storyblok
- Config gatsby-config file with Partial Hydration flag
-
Update
src/pages/index.tsx
-
Import
<StoryblokStory />
- Parse content
-
Call
<StoryblokStory />
in JSX scope - Update layout.jsx
- Set βuse clientβ
- Import Page component (content-type)
-
Add Page component inside of
components
to initialize - 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.
Top comments (0)