Next.js Discord

Discord Forum

State in app. Context?

Unanswered
mati_t_01 posted this in #help-forum
Open in Discord
mati_t_01OP
I am quite new in Next world - I have experience with React, but now I need build small app and I want to use optial and efficient solution.

App wll be small (2-3 pages) and main thing will be view with data - same data in two components. On the left - list, on right - visual. Literally same data.
My initial idea was just add context to layout and then pass data to components. But I am not sure it is efficitent solution. Context provider will be client component, so everything inside could be client components as well. Or - as a children it should be server? Data is coming from database, I am reading in on the top and pass to lower levels. Is that ok? App is only for display data, it can be filtered, I will start with ~200 objects, but can be more later. My main concern is - it is efficient? elements inside context will be server componnets?

Thanks!

Code below:

export default async function RootLayout(props: {
    children: ReactNode;
    params: { locale: string };
}) {
    const className = clsx(`${inter.className} text-white flex flex-col mx-auto`);
    const data = await prisma?.statistics.findMany();
    const messages = await getMessages();

    return (
        <html lang={props.params.locale}>
            <body className={className}>
                <NextIntlClientProvider messages={messages}>
                    <MapContextProvider data={data || []}>
                        <Navbar />
                        {props.children}
                        <SpeedInsights />
                        <CookieConsentBanner />
                    </MapContextProvider>
                </NextIntlClientProvider>
            </body>
        </html>
    );
}

4 Replies

West African Lion
Yeah I believe it's efficient, wrapping the contextProvider on the children doesn't make the children client component, so no worries, and it's efficient because nextjs only renders the layout component once so there only one query to the database made when the page first loads.
mati_t_01OP
This is something was I thought. And what I read in docs and few other places. But so many people told me: client parent => client children. I was confused 😉
West African Lion
A server component becomes client when it's imported to a client component
mati_t_01OP
so, from my understanding - import define type of component. Where component will be imported.

Is there any easy (or not easy) way to check type of component? client / server.
Sorry if question too trivial. I am trying understand concept.