Next.js Discord

Discord Forum

Best method to pass down props from layout down to all components (both SSR and CSR)

Unanswered
Cane di Oropa posted this in #help-forum
Open in Discord
Cane di OropaOP
For example the fetched user profile from the Backend.

9 Replies

Cane di OropaOP
export default async function AppLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const user = await getLoggedInUser();
    if (!user) {
        return redirect("/");
    }

    return <>{children}</>;
}


I would like to be able to access the 'user' object in the components of the page
@Cane di Oropa jsx export default async function AppLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const user = await getLoggedInUser(); if (!user) { return redirect("/"); } return <>{children}</>; } I would like to be able to access the 'user' object in the components of the page
the layout is a bit splitted from the main page. You need to fetch the data again in your page and there you can pass props to your components. Of course you can do the same in your layout, but you can pass it only to the components that are imported in the layout.

To prevent duplicate calls for the same data use React.cache(() => { your code })

Also don't check the auth inside your layout, as it may be leak. For more details ([see here](https://github.com/eric-burel/securing-rsc-layout-leak))
Cane di OropaOP
@B33fb0n3 Intresting but wouldn't fetching it again mean double the mandwith for the server?
As i can only fetch the user profile info from SSR
@Cane di Oropa <@301376057326567425> Intresting but wouldn't fetching it again mean double the mandwith for the server?
you don't fetch it twice a request when your using React.cache. If you don't use it yea, you are right
@Cane di Oropa solved?
Cane di OropaOP
I haven't had time to look further will do it later
@Cane di Oropasolved?
Cane di OropaOP
No but can for now close ticket going to be a bit off time bussy with work last few days