Dynamic Routing in Astro

To render new stories dynamically, set up a catch-all route in the Astro project.

Fetch and render a story dynamically

Create a src/pages/[...slug].astro file to fetch all stories in the space.

src/pages/[...slug].astro

---
import { getPayload, StoryblokPreview } from "@storyblok/astro";
import { apiClient, StoryblokBlock } from "../storyblok";
import Layout from "../layouts/Layout.astro";

const { slug } = Astro.params;

const payload = await getPayload({ locals: Astro.locals });

const story =
  payload.story ??
  (
    await apiClient.stories.get(slug || "home", {
      query: {
        version: "draft",
      },
    })
  ).data?.story;

if (!story) {
  return new Response(null, { status: 404 });
}
---

<Layout>
  <StoryblokBlock block={story.content} />
  <StoryblokPreview liveUpdate />
</Layout>

Get the slug from the current route parameters, making an exception for the home story to be /. If no story matches the slug, the page returns a 404 response.

With this approach, your project can automatically handle new stories you add to your space.

Tip

Remove the index.astro file from the project.

Note

To deploy in SSG mode, define the dynamic routes manually. Use apiClient.links.list() to call the links endpoint of the Content Delivery API and Astro’s getStaticPaths() to provide all routes. On routes that Astro renders at build time, StoryblokPreview reloads the page on save or publish, but liveUpdate doesn’t work: it requires on-demand rendering.

Learn more about dynamic routes in the Astro documentation.

Related resources

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories