Search⌘ K
AI Features
Home
Courses
Building Static Pages with Astro for Perfect Core Web Vitals

Dynamic Routing and Custom Content Rendering

Explore how to set up dynamic routes and render custom content pages with Astro using Markdown files. Understand how to fetch content collections, apply frontmatter data for SEO improvements, and customize MDX elements with reusable components to build flexible and SEO-friendly pages.

We'll cover the following...

Astro has built-in functions to fetch content collections, making it easy to generate dynamic routes based on the available Markdown files inside a project. Using Markdown files as a way to store content for our project enables us to keep the code and content of the project in one place.

For a smaller project, this can mean reduced costs and simpler infrastructures because no CMS is needed for managing pages. On the other hand, content editors need to have knowledge about Markdown in order to work with content collections. In this lesson, we’ll take a look at how to render content collections as individual pages and how to use their frontmatter data to render custom components.

Fetching a content collection

To fetch content collections in Astro, we can use the built-in getCollection function, which expects the name of the collection folder as the first parameter, also called a collection entry.

TypeScript 4.9.5
import { CollectionEntry, getCollection } from 'astro:content';



import Layout from '@components/Layout.astro';



type Props = {

	post: CollectionEntry<'posts'>

}



export async function getStaticPaths() {

	const posts = await getCollection('posts');



	console.log(posts);



	return posts.map((post) => ({

		params: { post: post.slug },

		props: {

			post

		},

	}));

}



const { post } = Astro.params;

Note: We can type the post prop using the CollectionEntry ...