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
https://nextjs.org/docs/app/getting-started/partial-prerendering#dynamic-apis