How do client components and server components work together in the same page?

Server components can render client components as children, passing them data as props, while client components cannot directly import and render server components. This lets you keep most of your page as fast, lightweight server components and only add client components for the small interactive pieces that truly need them.

// app/page.js (Server Component)
import LikeButton from './LikeButton'; // Client Component

export default async function Page() {
  const post = await getPost();
  return <div><h1>{post.title}</h1><LikeButton postId={post.id} /></div>;
}