Storyblok live editing with Next.js App Router and React Server Components

By Daniël Krux

3 min read

How to keep live editing support with Storyblok's full React Server Components approach for Next.js

Storyblok live editing with Next.js App Router and React Server Components
Authors

The problem

When working with Storyblok there are two ways to set up your Next.js app if you use the app router. The first way is to wrap your entire app in a provider which then takes care of updating the app when you edit anything in the preview environment of Storyblok, thus giving you live editing. Live editing is a cool feature because an editor can directly see the changes they made without constantly saving the page.

The second approach keeps everything server-side. This is nice because we can then leverage the full power of server components. But this approach comes with a big limitation... you lose the live editing support and the editor can only see their changes after they've hit the save button.

Or is there a way...

I found this Gist from someone who stumbled across the same issue and solved it with a clever solution. I expanded on their solution and replaced their database (@vercel/kv) with something free and local. Let's dive in on how I did it!

The solution

When you are in the live editing environment of Storyblok, they add a class to the browser's window object called StoryblokBridge. This bridge allows you to listen to live editing events happening with on():

const sbBridge = new window.StoryblokBridge(options)

sbBridge.on(['input', 'published', 'change  '], (event) => {
  const story = event.story
  // ...
})

The event returned contains the updated story with the live editing data the user entered. Awesome! We can use this live story and save it somewhere, then revalidate the page using Next.js' revalidatePath() API. Let's see how:

Let's first tackle the "save it somewhere" part of the solution. I used node-cache for this.

Create an instrumention.ts file in the root or src folder of your project:

import type NodeCache from 'node-cache'

export async function register() {
  const NodeCache = (await import('node-cache')).default
  const config = {
    stdTTL: 100,
  }

  global.storyblokCache = new NodeCache(config)
}

Add this to next.config:

 experimental: {
  instrumentationHook: true,
 },

This setup makes sure the cache won't be reset with each request, only on server startup.

Next, let's take a look at how we get the live editing data from Storyblok and save it in this cache. For this we first need to create a custom Storyblok bridge:

export const registerStoryblokBridge = ({ onInput }) => {
  const isServer = typeof window === 'undefined'
  const isBridgeLoaded = !isServer && typeof window.storyblokRegisterEvent !== 'undefined'

  if (!isBridgeLoaded) {
    return
  }

  window.storyblokRegisterEvent(() => {
    const sbBridge = new window.StoryblokBridge()
    sbBridge.on(['input'], (event) => {
      if (!event?.story) return

      onInput(event.story)
    })
  })
}

This function listens to live editing events, as we found out above, and makes a callback with the story containing the latest live editing data.

We then use this function in a client component

"use client";

import { previewUpdateAction } from "@/actions/previewUpdateAction";
import { registerStoryblokBridge } from "@/utils/storyblok";
import { useEffect, startTransition } from "react";

export const StoryblokPreviewSyncer = ({ pathToRevalidate }) => {
  function handleInput(story) {
    startTransition(() =>
      previewUpdateAction({
        story,
        pathToRevalidate,
      })
    );
  }

  useEffect(() => {
    registerStoryblokBridge({
      onInput: handleInput,
    );
  }, []);

  return null;
};

This client component makes sure the window event is fired with useEffect. The handleInput function uses React's startTransition to call a Next.js Server Action containing the latest data. Let's find out what this server action looks like.

'use server'

import { revalidatePath } from 'next/cache'
import { ISbStoryData } from '@storyblok/react'

export async function previewUpdateAction({ story, pathToRevalidate }) {
  if (!story) {
    console.error('No story provided')
    return
  }

  try {
    global.storyblokCache.set(story.slug, JSON.stringify(story))

    if (pathToRevalidate) {
      revalidatePath(pathToRevalidate)
    }
  } catch (error) {
    console.log(error)
  }
}

This function takes the story with the live editing data and saves it to our cache. It then calls revalidatePath to make sure Next.js knows it needs to update the page.

We now only need one more piece to solve the puzzle and that is the function that takes care of fetching the story:

export const getStoryblokData = async (slug) => {
  const storyblokApi = getStoryblokApi()

  try {
    const story = global.storyblokCache?.get(slug)

    if (!story) {
      const result = await storyblokApi.get(`cdn/stories/${slug}`, { version: 'draft' })

      return result.data.story
    }

    return JSON.parse(story)
  } catch (e) {
    console.log(e)
  }
}

This function first tries to fetch the story from the database (this would be the story with the latest live editing). If this fails it falls back to the Storyblok API.

We can then use this function on a page together with our <StoryblokPreviewSync /> component:

import { StoryblokComponent } from '@storyblok/react/rsc'

import { StoryblokPreviewSyncer } from '@/components/StoryblokPreviewSync'
import { getStoryblokData } from '@/utils/storyblok'

export default async function Home() {
  const story = await fetchData()

  return (
    <main>
      <StoryblokPreviewSyncer pathToRevalidate={'/'} />
      <StoryblokComponent blok={story?.content} />
    </main>
  )
}

function fetchData() {
  return getStoryblokData('home')
}

There you go! Now you should have live editing support, with the full power of React Server Components!

Upcoming events

  • Drupal CMS Launch Party

    Zoals sommigen misschien weten wordt op 15 Januari een nieuwe distributie van Drupal gelanceerd. Namelijk Drupal CMS (ook wel bekend als Starshot). Om dit te vieren gaan we op onze campus een klein eventje organiseren. We gaan die dag samen de livestream volgen waarbij het product gelanceerd wordt. De agenda is als volgt: 17u – 18u30: Drupal CMS livestream met taart 18u30 – 19u00: Versteld staan van de functionaliteiten 19u – 20u: Pizza eten en verder versteld staan van de functionaliteiten Laat ons zeker weten of je komt of niet door de invite te accepteren! Tot dan!

    | Coven of Wisdom Herentals

    Go to page for Drupal CMS Launch Party

  • Coven of Wisdom - Herentals - Winter `24 edition

    Worstelen jij en je team met het bouwen van schaalbare digitale ecosystemen of zit je vast in een props hell met React of in een ander framework? Kom naar onze meetup waar ervaren sprekers hun inzichten en ervaringen delen over het bouwen van robuuste en flexibele applicaties. Schrijf je in voor een avond vol kennis, heerlijk eten en een mix van creativiteit en technologie! 🚀 18:00 – 🚪 Deuren open 18:15 – 🍕 Food & drinks 19:00 – 📢 Building a Mature Digital Ecosystem - Maarten Heip 20:00 – 🍹 Kleine pauze 20:15 – 📢 Compound Components: A Better Way to Build React Components - Sead Memic 21:00 – 🙋‍♀️ Drinks 22:00 – 🍻 Tot de volgende keer? Tijdens deze meetup gaan we dieper in op het bouwen van digitale ecosystemen en het creëren van herbruikbare React componenten. Maarten deelt zijn expertise over het ontwikkelen van een volwassen digitale infrastructuur, terwijl Sead je laat zien hoe je 'From Props Hell to Component Heaven' kunt gaan door het gebruik van Compound Components. Ze delen praktische inzichten die je direct kunt toepassen in je eigen projecten. 📍 Waar? Je vindt ons bij iO Herentals - Zavelheide 15, Herentals. Volg bij aankomst de borden 'meetup' vanaf de receptie. 🎫 Schrijf je in! De plaatsen zijn beperkt, dus RSVP is noodzakelijk. Dit helpt ons ook om de juiste hoeveelheid eten en drinken te voorzien - we willen natuurlijk niet dat iemand met een lege maag naar huis gaat! 😋 Over iO Wij zijn iO: een groeiend team van experts die end-to-end-diensten aanbieden voor communicatie en digitale transformatie. We denken groot en werken lokaal. Aan strategie, creatie, content, marketing en technologie. In nauwe samenwerking met onze klanten om hun merken te versterken, hun digitale systemen te verbeteren en hun toekomstbestendige groei veilig te stellen. We helpen klanten niet alleen hun zakelijke doelen te bereiken. Samen verkennen en benutten we de eindeloze mogelijkheden die markten in constante verandering bieden. De springplank voor die visie is talent. Onze campus is onze broedplaats voor innovatie, die een omgeving creëert die talent de ruimte en stimulans geeft die het nodig heeft om te ontkiemen, te ontwikkelen en te floreren. Want werken aan de infinite opportunities van morgen, dat doen we vandaag.

    | Coven of Wisdom Herentals

    Go to page for Coven of Wisdom - Herentals - Winter `24 edition

  • The Test Automation Meetup

    PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED Test automation is a cornerstone of effective software development. It's about creating robust, predictable test suites that enhance quality and reliability. By diving into automation, you're architecting systems that ensure consistency and catch issues early. This expertise not only improves the development process but also broadens your skillset, making you a more versatile team member. Whether you're a developer looking to enhance your testing skills or a QA professional aiming to dive deeper into automation, RSVP for an evening of learning, delicious food, and the fusion of coding and quality assurance! 🚀🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 First round of Talks 19:45 – 🍹 Small break 20:00 – 📢 Second round of Talks 20:45 – 🍻 Drinks 21:00 – 🙋‍♀️ See you next time? First Round of Talks: The Power of Cross-browser Component Testing - Clarke Verdel, SR. Front-end Developer at iO How can you use Component Testing to ensure consistency cross-browser? Overcoming challenges in Visual Regression Testing - Sander van Surksum, Pagespeed | Web Performance Consultant and Sannie Kwakman, Freelance Full-stack Developer How can you overcome the challenges when setting up Visual Regression Testing? Second Round of Talks: Omg who wrote this **** code!? - Erwin Heitzman, SR. Test Automation Engineer at Rabobank How can tests help you and your team? Beyond the Unit Test - Christian Würthner, SR. Android Developer at iO How can you do advanced automated testing for, for instance, biometrics? RSVP now to secure your spot, and let's explore the fascinating world of test automation together!

    | Coven of Wisdom - Amsterdam

    Go to page for The Test Automation Meetup

Share

Jobs

Front-end Developer (Drupal)

Brussel, Brussels Hoofdstedelijk Gewest, België

Backend Developer

Brussel, Brussels Hoofdstedelijk Gewest, België

Senior Web Developer

Sofia, Sofia, Bulgarije

Front-end Developer

Rotterdam, Zuid-Holland, Nederland

View all jobs