I’m trying to learn next js, but I don’t understand how this works:
I have my navbar component where I call this function:

export default async function Navbar() {
    const supabase = createClient()

    const {
      data: { user },
    } = await supabase.auth.getUser()
    return(
        <div className="w-full">
          <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
            <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm">
              <Link href={"/"}>Home</Link>
              <div>
                { user ?  
                ( 
                  <>
                  <Link href={"/account"}>Account</Link>
                <form action="/auth/signout" method="post">
                  <button className="button block" type="submit">
                    Sign out
                  </button>
                </form></>) : 
                ( <Link href={"/login"}>Login</Link>)}
              </div>
            </div>
          </nav>
        </div>
    )
  }

Then I have these links to home and account. So my question is, since it is a server component, do I need to make a call to supabase every time I go to home or account with it? Then, if I need to get the user in another component, do I need to make the same function?

Or should I create a context and just use it where I need it?

I want to see if someone can help understand something