I am using nextjs and supabase. So I was trying to figure out why my web app is so slow and I think that one of the reasons might be that almost all of my pages are server-side renders. So with nextjs the default should be static renders or at least SSG. My problem is that even pages which have almost no content and they don't depend on anything at all, they are not fetching any data or anything, are still server-side renders. I think that my main issue is that I am using: import { cookies } from "next/headers"; export const dynamic = "force-dynamic"; and const supabase = createServerComponentClient<Database>({ cookies }); . So to my understanding every time that I do this in a nextjs server component, I am forcing dynamic rendering and uncached data fetching. So this might make everything slower, right? The problem is that I need this kind of approach to get the user's authenticated status and id. How should I manage my user's authentication status and get information about his profile from supabase? I am basically fetching the user's auth status and profile in every server component that needs it and I pass this information down to other components with props like this:

const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    redirect("/");
  }

  // TODO IMPORTANT: make user state management across the entire app... how ?
  const { data: currentUserProfile } = await supabase
    .from("profiles")
    .select()
    .eq("id", user.id)
    .single();

I can't really use something like a react context, because for that I need a client component, so the user's profile and auth data can not be accessed in a server component. Is there a way to use cookies without making the page dynamic? or can I store the authenticated user's id somewhow across the entire app?