// app/blog/page.tsx
export default async function BlogPage() {
  return (
    <div>
      <RecentPosts />
      <PopularPosts />
    </div>
  )
}

// components/RecentPosts.tsx
export default async function RecentPosts() {
  const posts = await fetch('<https://api.example.com/posts/recent>')
    .then(res => res.json())

  return (
    <section>
      <h2>최근 글</h2>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </section>
  )
}

// components/PopularPosts.tsx
export default async function PopularPosts() {
  const posts = await fetch('<https://api.example.com/posts/popular>')
    .then(res => res.json())

  return (
    <section>
      <h2>인기 글</h2>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </section>
  )
}

// app/blog/page.tsx
export default async function BlogPage() {
  return (
    <div>
      <RecentPosts />
      <PopularPosts />
    </div>
  )
}

// components/RecentPosts.tsx
export default async function RecentPosts() {
  const posts = await fetch('<https://api.example.com/posts/recent>')
    .then(res => res.json())

  return (
    <section>
      <h2>최근 글</h2>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </section>
  )
}

// components/PopularPosts.tsx
export default async function PopularPosts() {
  const posts = await fetch('<https://api.example.com/posts/popular>')
    .then(res => res.json())

  return (
    <section>
      <h2>인기 글</h2>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </section>
  )
}

Page Router vs. App Router