Hire Expert
Astro Developers

---
// src/pages/blog/[slug].astro
import { getCollection, type CollectionEntry } from 'astro:content';
import Layout from '@/layouts/BlogLayout.astro';
import Comments from '@/components/Comments.tsx'; // React island

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({ params: { slug: post.slug }, props: { post } }));
}

interface Props { post: CollectionEntry<'blog'>; }
const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <Content />
  </article>
  <!-- Only this component ships JavaScript -->
  <Comments client:visible postId={post.slug} />
</Layout>