Next.js › Data Fetching

How can you pass data fetched on the server down into a client component?

Intermediate

Answer

You fetch the data inside a server component as usual, and then pass the resulting data as a normal prop to a client component that you render as its child, letting the client component focus purely on interactivity while the server handles the actual data loading.

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

Real-world example A blog post page fetches the current like count on the server and passes it as a starting value to a client side like button, which then handles further updates interactively in the browser.

Common follow-ups: What kinds of data can safely be passed from server to client components?;Can you pass a database connection object as a prop this way?

Client Components & Hydration;Server Components