Next13 How does the client component use the data from the server component

[coderlfm]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

nextjs

Which example does this report relate to?

-

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

This is how it was used in next12

export async function getStaticProps() {
  const posts = await getPosts()
  return { props: { posts } }
}

function Posts(props) {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    initialData: props.posts,
  })

  // ...
}

I have similar needs in next13

I want the server to have the data ready when the page first opens. For example, the first page of a blog is rendered by the server, and when the second page is clicked, the client resends the request

As far as I know, in next13 the server component couldn't transfer data to the client.

How is this requirement handled in next13?

Expected Behavior

I wish there was a way for the client to get the server component's data as initialization data

To Reproduce

-

[balazsorban44]

You can pass props to client components with the one requirement that they need to be serializable (eg.: for example you cannot pass functions).

Please refer to the docs: https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.