Announcing a Storyblok Loader for the Astro Content Layer API

We are very excited to announce that the latest alpha version of our Astro integration @storyblok/astro now supports the new Astro Content Layer API. The Content Layer API is an innovative new solution to fetch and handle content from external APIs and store it locally. It is designed to scale efficiently and handle large sites with thousands of pages highly performantly. With our new, built-in Storyblok loader, fetching your stories and turning them into an Astro Content Collection is simple and straightforward to accomplish.

How to use it

First of all, install the latest alpha version of our integration in your Astro project:

npm i @storyblok/astro@alpha

As this is an experimental opt-in feature, you need to enable it by setting contentLayer to true in your astro.config.mjs file.

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: "your-access-token",
      contentLayer: true,
    }),
  ],
  experimental: {
    contentLayer: true,
  },
});

Next, in the src/content folder, you need to create a config.ts file that defines one or more collections that consist of the entirety of stories available in your Storyblok space.

import { storyblokLoader } from "@storyblok/astro";
import { defineCollection } from "astro:content";

const storyblokCollection = defineCollection({
  loader: storyblokLoader({
    accessToken: "your-access-token",
    apiOptions: {
      region: "us",
    },
    version: "published",
  }),
});

export const collections = {
  storyblok: storyblokCollection,
};

Let’s look at an example […slug].astro dynamic route that renders the content entries stored in a collection.

---
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import { type ISbStoryData } from "@storyblok/astro";

export async function getStaticPaths() {
  const stories = await getCollection("storyblok");

  return stories.map(({ data }: { data: ISbStoryData }) => {
    return {
      params: { slug: data.full_slug },
      props: { story: data },
    };
  });
}

interface Props {
  story: ISbStoryData;
}

const { story } = Astro.props;
---

<BaseLayout>
  <StoryblokComponent blok={story.content} />
</BaseLayout>

Benefits of using Storyblok with the Astro Content Layer API

The Astro Content Layer API stores all stories of a Storyblok space locally in the project. This approach provides two benefits:

• Only new and updated stories have to be fetched from Storyblok instead of fetching all stories with every build. Especially with large-scale sites with thousands of pages, this can significantly reduce API traffic and reduce build times.
• Direct access to the database provides a powerful query API to perform complex search and filtering operations.

The Astro Content Layer API is designed to work with Static Site Generation (SSG). Therefore, it is a perfect approach to consider for the production environment of a Storyblok project. You can learn more about deploying Storyblok projects in this tutorial.

Next steps

We hope you’re excited to try out this new feature! We would absolutely love to see your projects built with Storyblok and Astro, and hear your feedback about our experimental support of the new Content Layer API.

Would you like to contribute to the development of @storyblok/astro? Feel free to create an issue or a PR in the official GitHub repository.

Comments

[Stephan Simonett]

Thank you very much for pushing the Storyblok content loader forward, was already waiting for this 🚀
At the time of writing, the content layer is still an experimental feature in Astro, so you need to enable it first

# astro.config.ts

export default defineConfig({
  experimental: {
      contentLayer: true,
  }
})

The Astro server will fail to start if you follow this post above without enabling the feature explicitly.

[Manuel Schröder]

Thank you very much @wireless25, I've just changed the post.