Helo, I have a server component called Header where I am fetching the user data as follow:

import { getServerAuthSession } from '@/server/auth';
import { api } from '@/trpc/server';

import MainNav from './MainNav';
import UserNav from './UserNav';
import LogInButton from '@/app/components/LogInButton';

export default async function Header() {
    const session = await getServerAuthSession();

    const user =
        session && session.user
            ? await api.user.getById({
                  id: session.user.id,
              })
            : null;

    return (
        <header className="sticky top-0 z-10 w-full bg-background px-4">
            <div className="m-auto flex max-w-screen-xl items-center justify-between py-4">
                <MainNav />

                {user ? <UserNav user={user} /> : <LogInButton />}
            </div>
        </header>
    );
}

Then I am passing the user as a prop to a client component called UserNav where I render the user.credits value somewhere.

I want to update this value every time it changes, any ideas on how to achieve this?

Do I need to convert my Header component to a Client Component?