How to keep Next.js Client Side and Server Side states in sync?

I’m very confused of what might be the best practise to handle server side and client side state in combination with next.js. As a side note I’m already using tanstack query and jotai for Statemanagement. But I’m open for other options. I read the whole documentation of Tanstack Query and Next.js but I’m still confused to what might be the best approach because they only covered server side or client side only but in combination seems still under dev.

Problem:

How to keep server state and client state in sync while following good practicies.

I’m having three files in this example:

Navbar (server-side)

This fetches the user server side and displays the menu depending if someone is logged in or not. It’s also fetching userData which is dependent on user so it awaits the user fetch and then fetches userData.

export default async function Navbar({ lang }: NavbarProps) {
  const supabase = createClient();

  const queryClient = new QueryClient();
  const user = await queryClient.fetchQuery({
    queryKey: ["user"],
    queryFn: () => getUserServer(supabase),
  });

  const cookieHeader = cookies().toString();
  const userData = await queryClient.fetchQuery({
    queryKey: ["userData", user?.id],
    queryFn: () => fetchUserDataServer(cookieHeader),
  });

LoggedInHome (server-side)

This fetches the user server side to redirect if a user is not logged in.

export default async function LoggedInHomePage({
  params: { lang },
}: LoggedInHomePageProps) {
  const supabase = createClient();

  const queryClient = new QueryClient();

  const user = await queryClient.fetchQuery({
    queryKey: ["user"],
    queryFn: () => getUserServer(supabase),
  });

  if (!user) {
    redirect(SIGN_IN);
  }

  await queryClient.prefetchQuery({
    queryKey: ["profile"],
    queryFn: () => fetchProfile(supabase),
  });

Affix (client-side)

An component which shows credits of a user that frequently updates but uses the
user and userData. The data is currently received by the server and updated on the client if the user is prefetched.

const TrailAffix: React.FC<TailAffixProps> = () => {
  // useQuery hook
  const {
    data: user,
    isLoading: isUserLoading,
    error: userError,
  } = useGetUser();

  // dependent useQuery hook
  const {
    data,
    isError: isUserDataError,
    isFetching,
  } = useGetUserData({
    userId: user?.id,
  });

Before I was using await queryClient.prefetchQuery({ but now as I have state on the server that is not only passing it to the client component but also uses it, I’m worried that the server-side state can becomes out of sync.
As you can see the state is on both server and server side. I’m not sure how to avoid refetches and make sure everything is only fetches once when loading the page but also in a fresh state when i update the states.

Stack:

Next.js 15 App Router
Tanstack Query 5