Javascript – How can I show an updated header component with a user's info in Next.js?

I am currently building my first web application using the Next.js App Router. Unfortunately, I’ve hit a roadblock in trying to display the user’s info (like a username) in the page’s header. When the status of the user’s session changes, the header does not update to reflect the new status. For instance, if a user signs in, they are redirected to their dashboard, but the header still shows the placeholder "Sign In" instead of a username:

When I reload the page, however, the header updates to reflect the new information:

This leads me to believe that there is an issue with the header not re-rendering upon navigation.

Currently, I have placed the header in the root template.tsx file:

import Header from "@/components/Header/Header";
import { PropsWithChildren } from "react";

export default function RootTemplate({ children }: PropsWithChildren) {
    return (
        <>
            <Header />
            <main>
                {children}
            </main>
        </>
    )
}

(The Header component logic is not included here because I have ensured that it properly fetches the account information at render time. I don’t believe that the Header component is the issue here.)

According to the Next.js documentation, template.tsx files differ from layout.tsx files in that their children do not persist upon navigation (at least, from what I understand):

Templates are similar to layouts in that they wrap a child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the child is mounted, DOM elements are recreated, state is not preserved in Client Components, and effects are re-synchronized.

Thus, when I placed my Header component in template.tsx, I thought it would be re-rendered on the server with updated information and sent to the client upon navigation. However, that doesn’t appear to be happening (maybe because it’s a Server Component)?

To get around this, I tried to convert the Header component into a Client Component that retrieves the user’s name upon rendering with a Server Action, but there was a noticeable delay in the header updating due to the latency of fetching account and session information from the database. Is there a way to make the Header component re-render to show consistently updated user information without a delay?