I get this error on first render:

Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
    at Navbar (./components/navbar.tsx:32:83)
digest: "1152426343"

navbar.tsx: https://pastebin.com/K6Qx3eAD

navbarLoader.tsx:

"use client";

import { usePathname } from "next/navigation";
import { Navbar } from "./navbar";

export default function NavbarLoader() {
  const path = usePathname();
  if (path === "/") {
    return <Navbar />;
  }
  return <Navbar />;
}

layout.tsx:
https://pastebin.com/ijLsgKxy

Any help is greatly appreciated