Can’t implement a server-side header in Nested Layouts (no flicker, auth + country detection)

[GlebKodrik]

Hello, I’m struggling a lot with implementing a server-side header in the App Router.

What I need:

1. The header should be rendered on the server (SSR).
2. It must already include the correct country and auth state (whether the user is logged in or not).
3. It should avoid flickering (no “loading” client-side mismatch).

What I tried:

1. Added the header to RootLayout → but still facing issues.
2. Tried nested layouts with template.tsx.
3. Used parallel routes.
4. Wrapped each page manually with a header component → but this breaks on error.tsx pages, since error pages must use use client, and then the server-side header doesn’t work anymore.

The main problem:
I need the header to always be server-rendered, even on error pages, so it has the correct country + auth state right away, with no client-side re-fetch and no flickering.

Is there a recommended way to achieve this in App Router?
Or maybe an example of how to structure layouts/templates so that a server component header works consistently across normal pages and error pages?

I’ve tried everything but I feel stuck. Any advice or best practices would be greatly appreciated 🙏

[GlebKodrik]

server actions don't work either. The whole tree becomes server

[GlebKodrik]

API Route works, but the cookie is not read and does not work properly (but this is the only option that I see, I will study it)

[icyJoseph]

could you sketch a React tree of how things should look like at the end?

[GlebKodrik]

@icyJoseph I want the server to already determine whether I’m authenticated or not when I load the

. I have a token stored in cookies, and I rely on it to check authentication. But the problem is that I can’t directly work with cookies, because then the whole component tree becomes server-side. So, how can I make sure that after refreshing the page there’s no flickering, and the authentication state is already known on the server?

For example, if I try to fetch cookies directly inside the Header using await cookies(), then the whole component tree becomes dynamic.

// Header.tsx
import { cookies } from "next/headers";

export default async function Header() {
  const cookieStore = await cookies();
  const token = cookieStore.get("token")?.value;

  return (
    <header>
      {token ? <p>Authenticated</p> : <p>Guest</p>}
    </header>
  );
}

The issue with this approach is that once I use await cookies() here, the entire tree that includes Header turns into a dynamic server component. That’s what I want to avoid, because I only need to check authentication, not make everything dynamic.

[VladPorvin]

@icyJoseph
Hello! Can you tell me if there is a solution?