Next.js Discord

Discord Forum

Is it possible to wrap the entire application in a client component, but still use server compon...

Answered
MooKorea posted this in #help-forum
Open in Discord
MooKoreaOP
Hello,
I have the following code in the root layout.tsx:
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await getServerSession();
  return (
    <html lang="en">
      <QueryParamProvider>
        <AuthProvider session={session}>
          <body className={rubik.className}>{children}</body>
        </AuthProvider>
      </QueryParamProvider>
    </html>
  );
}

I'm using various packages/modules/components (I'm unsure what terminology to use) that require to wrap my entire application in a client component, such as Next Auth. However, by doing so all of the child components are client components, and I lose the benefits of using server components. Is there a way to use these "provider" components while still being able to use server components?
Answered by Asian black bear
Regarding your initial question: using providers in the root layout wrapping the entire app is completely fine and will not force any of its children to be client components; otherwise, the whole app router would be unusable.
View full answer

16 Replies

Asian black bear
by doing so all of the child components are client components
No.
MooKoreaOP
well let's suppose I need to fetch data without exposing sensitive API keys. Would that simply not be possible in my application since the entire application is in the client?
Asian black bear
It's not fully client-side.
Your children of the providers can still be server components.
A component that is itself marked with use client is not forcing its children to be the same.
Thus you can just drop any server component in there that fetches server-side as usual.
MooKoreaOP
I see. Then how come when I mark a parent component as "use client", any child components that require useState, useEffect, etc still work as intended without the directive?
American Crow
If you import components from a client components it becomes a client component
Near is talking about children
Asian black bear
It's a difference whether a component is beyond the server/client boundary or whether you are in a file that is marked with the directive.
Asian black bear
Regarding your initial question: using providers in the root layout wrapping the entire app is completely fine and will not force any of its children to be client components; otherwise, the whole app router would be unusable.
Answer
MooKoreaOP
I believe I read that article already, perhaps there's something I'm fundamentally misunderstanding
@MooKorea I see. Then how come when I mark a parent component as "use client", any child components that require useState, useEffect, etc still work as intended without the directive?
Asian black bear
Because use client is a boundary. Anything imported beneath the boundary as zomh mentioned is treated as a client component by default.
use client is not intended to be slapped blindly on any suitable file, it's merely a line in a file which describes that everything imported beneath it should be treated as a client component as well
Passing it from the outside (which is still a server-side context) doesn't make children for example client components