Dynamic Routing in Astro

Set up a catch-all route in the Astro project to render new stories dynamically.

Fetch and render a story dynamically

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

src/pages/[…slug].vue

---
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import Layout from "../layouts/Layout.astro";

const { slug } = Astro.params;

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get(`cdn/stories/${slug || "home"}`, {
    version: "draft",
});

const story = data.story;
---

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

Get the slug from the current route parameters, making an exception for the home story to be /.

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

Remove the index.astro file from the project, as it’s no longer needed.

To deploy in SSG mode, dynamic routes need to be manually defined. Use the links endpoint of the Content Delivery API and Astro’s getStaticPaths() to provide all routes. Learn more about dynamic routes in the Astro documentation.

Next Part

Content Modeling in Astro

Previous Part

Visual Preview in Astro