Hello!

I'm trying to let a user click one of blog posts before fetching and displaying the blog post content. Is this possible with App router?

Right now I have a server component like this:

interface BlogsProps {
  authorId: string;
}

export default async function Blogs(props: BlogsProps) {
  const blogsTitlesData = await getBlogsTitlesData(props.authorId);
  return (
    <div className="container grid max-w-4xl grid-cols-1 gap-4">
      {blogsTitlesData.map((blogsTitlesData) => {
        return (
          <Link
            key={blogsTitlesData.slug}
            href={`${props.authorId}/blogs/${blogsTitlesData.slug}`}
          >
            <Card key={blogsTitlesData.title}>{/* ... */}</Card>
            // Something like this upon being clicked
            // <BlogContent>
          </Link>
        );
      })}
    </div>
  );
}

I took a look at https://app-router.vercel.app/ but not sure if I see an appropriate solutions for my case.

Thank you!