Introduction to NextJS 13.4

Moving props from server component to client component

     

Props passed from the Server to Client Components need to be "serializable". This means that values such as functions, Dates, etc, cannot be passed directly to Client Components.

     

when you are moving data from the server component to the client component, you have to pay attention to your performance.

     

when you pass props to your client component from the server component, this data has been created on the server and will send as a data with your page.

     

so if your data is too big, your bundle will increase.

     

// Profile is a Client Component
import Profile from './Profile'

// Layout is a Server Component by default
export default async function Layout({ children }) {
  const res = await fetch('/user')
  const firstName = await res.json().firsName // If this is 1mb, the data sent to the client will also be 1mb.

  return (
    <>
      <nav>
        <Profile firstName={firstName}/>
      </nav>
      <main>{children}</main>
    </>
  )
}