Authenticating with my backend breaks caching

My backend uses Authorization header or cookie with token value to authenticate users.

When i get the token i save it in http only cookie in middleware , but when i access it to pass it to the request i am doing inside my “/api” routes i am loosing the caching .
what is the solution ?

You can’t cache a component that needs to access cookies since its output would change for every request

The idiomatic solution here is to use Partial Prerendering, which allows pre-rendering layouts while still rendering certain components dynamically, and then to move the code that accesses cookies down into a component that is wrapped in Suspense

Users will initially be served a cached layout with the suspense boundary showing its fallback, and then the fallback will be replaced with the dynamic data once the cookies have been read