How to use Next JS 13 Server Components properly

Question

I have recently been researching the updates with Next JS 13, primarily how every component is by default a server component. This seems like a perplexing thing to me...I cannot figure out how to properly utilize this feature.

For example...I am trying to set up user authentication and authorization paths / content in my app. I'm not sure it matters, but I am using React Query (now tanstack query) to store my authenticated credentials, which are needed for all of my database calls to determine appropriate content access.

Now, currently I have a vertical navigation bar and a content page rendered as two child components in the root level layout. However, I will need these components to render different content based on the signed-in status of a user (showing default website tabs when signed out, and other navigation tabs when a user is signed in, for example). But my navigation and content page are really housing the entire contents of my app, and they BOTH need to know if my user is logged in.

So, if I create a wrapper component that stores this signed in info that 'use client' is applied to, and wrap the nav and content page in a parent that has 'use client', then my entire app basically now is rendered on the client and NOT the server.

My understanding is that if a component as the 'use client' directive, then all child components are automatically rendered on the client. And my auth parent component needs this 'use client' directive for use with tanstack query / state.

Am I misunderstanding something about how this works? I guess I just don't understand the benefit of Next JS 13 making the default server components when one of the most common use cases of authenticating and authorizing requires a client component at almost the root level.

Please help clarify this. Thanks in advance!!!

score 1 · Accepted Answer · answered Jul 29 '23 at 21:28

From this answer:

Since the root layout component is rendering children, any component inside children tree can be server component

Say for example you have a layout.tsx file like this one:

"use client";

export default function Layout({children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">        
      <head />
        <body>
           {children}
           <SomeGlobalComponent />
      </body>
    </html>
  )
}

{children} is still server rendered by default even with the "use client" directive in the root layout. However, <SomeGlobalComponent /> has to be server rendered by cause it's not a part of the children prop.

How to use Next JS 13 Server Components properly

1 Answers1