I’m a bit confused as to where to pass my data maybe to the client or to the server component.

So I get data using axios

i have

hooks/fetchPublication

import axios from "@/lib/axios"

export const useDomain = () => {

    const csrf = () => axios.get('/sanctum/csrf-cookie')
    const getPublication = async ( props ) => {
        try{
            await csrf()

            const res = await axios
                .get(`api/${props.id}/dashboard`)
            

            return res.data


        }catch(error){
           console.log(error)

        }
    }
  return {
        getPublication
    }
}

and in my client component which is layout.js i did this

'use client'

import { useAuth } from "@/hooks/auth"
import Header from "./components/Header"
import { useDomain } from "@/hooks/fetchPublication"

export default function Layout({params,  children }) {
    
    const { user } = useAuth({ 
        middleware: 'auth',
    })
    
    const { id } = params
    const { getPublication } = useDomain()
    const  data  =  getPublication({id})

    if (!data) {
        return redirect('/');
    }
 return (
        <div>
            <Header user={user} />

            {children}
        </div>
    )
}

that works.

But if I do the same thing inside page.js some part of the response is not given
For example I see this response if the code above is inside page.js

{
  "publication": {
    "id": "9c095ff7-8d30-43ea-bfee-f063a27cba07",
    "subdomain": "test",
    "publication_name": null,
    "about": null,
    "twitter": null,
    "instagram": null,
    "website": null,
    "facebook": null,
    "linkedin": null,
    "header_color": "#ffffff",
    "user_id": 1,
    "created_at": "2024-05-13T22:53:06.000000Z",
    "updated_at": "2024-05-13T22:53:06.000000Z"
  },
  "user": null,
  "message": "Dashboard"
}

But if in layout.js I see the full response with the user data.