export default async function NavBar() {
  const loggedIn = cookies().get('session') != undefined

  return loggedIn ? <LoggedInLinks /> : <LoggedOutLinks />
}

async function LoggedInLinks() {
  const isManager = (await fetchSelfUser()).successful?.role.manager || false

  ...
}

export async function fetchSelfUser() {
    return await apiFetch<User>(`/user/me`)
}

export async function apiFetch<T>(path: string, auth: boolean = true, init?: RequestInit) {
  //....
  await fetch(bla bla bla)
}

export async function apiFetch<T>(path: string, auth: boolean = true, init?: RequestInit): Promise<FetchResponse<T>> {
    if (auth) {
        const session = await getSessionCookie()
        if (!session) {
            return Promise.resolve({ error: 'Not logged in' })
        }

        init = {
            ...init,
            headers: {
                "Authorization": `Bearer ${session}`,
                ...init?.headers
            },
        }
    }
    const result = await fetch(`${API_BASE_URL}${path}`, init)
    const json = await result.json() as ApiResponse<T>
    
    if (json.success) {
        return {
            successful: json.data,
        }
    } else {
        return {
            error: json.message,
        }
    }
}

await fetch(`https://...`, { cache: 'force-cache' })

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

and there's an uncached request above it in the component tree