Gideon Maina | 🌐 Dynamic Routes with Server Rendering in Astro

In this post, we’ll walk through:
What dynamic routes are in Astro
How to create dynamic routes
How to use server rendering to fetch dynamic data
A practical example using a blog post page

🧭 What Are Dynamic Routes?

Dynamic routes are routes that change based on URL parameters. For example:

astro

/blog/hello-world.astro
/blog/my-second-post.astro

Instead of hardcoding these routes, you define a dynamic route in Astro like this:

astro

/blog/[slug].astro

The **[slug] ** part is a dynamic segment, which Astro interprets as a variable.

⚙️ Setting Up a Dynamic Route in Astro

Let’s say you’re building a blog and want to render posts based on their slug.

Step 1: Create the File

Create a file under src/pages/blog/[slug].astro:

bash

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

Step 2: Enable SSR

Astro supports SSR out of the box if you're using an SSR adapter like @astrojs/node, @astrojs/vercel, or @astrojs/netlify.

In astro.config.mjs, enable SSR:

astro.config.mjs

javascript

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node()
});

Enable SSR

🔄 Fetching Dynamic Data with getStaticPaths or getServerSideProps

Option A: getStaticPaths (SSG - Static Site Generation)

Use this if your content is known at build time:

[slug].astro

html

---
export async function getStaticPaths() {
  const posts = await fetchPosts(); // From local data or CMS
  return posts.map(post => ({
    params: { slug: post.slug }
  }));
}

const { slug } = Astro.params;
const post = await getPostBySlug(slug);
---

  {post.title}
  
    {post.title}
    {post.content}

Using getStaticPaths

📦 Deployment Considerations

If using SSR, ensure you're deploying to a platform that supports SSR, such as:

Vercel with* @astrojs/vercel*
Netlify with @astrojs/netlify
Node.js with @astrojs/node adapter

✅ Benefits of Server-Rendered Dynamic Routes

SEO-Friendly: Content is delivered as fully rendered HTML.
Real-Time: Can show up-to-date content from a database or API.
Scalable: Each page only fetches the data it needs.

✨ Useful Links

How to Implement Dynamic Routing in Astro Static Sites

Want to make your Astro static site more dynamic? In this tutorial, we’ll walk you through how to implement dynamic routing in Astro using real data from an API. You’ll learn how to generate multiple pages from a single template, use the [slug].astro pattern, and dynamically fetch content to display on each route. This approach helps you build fast, content-rich sites with the performance benefits of static site generation.