Cache fetch with Authorization headers #51279
Replies: 8 comments 11 replies
-
I was able to cache the results of Solution would look something like this. const cachedRequest = fetch("https://...", {
headers: {
Authorization: `Bearer ${token}`,
},
cache: "force-cache",
}); |
Beta Was this translation helpful? Give feedback.
-
OK compris votre pensé
Le dim. 24 sept. 2023 à 00:57, ci-vamp ***@***.***> a écrit :
… I have the same use case. All users must make authenticated requests but
they are getting the same data back.
The problem is that this is caching per user / token. If you look at the
cache source code it creates a cache key (used for finding a hit or miss)
using the headers of the request. Inherently, every request will have
unique auth headers (per user and eventually per different issue +
expiration time).
When the cache key hash is generated, even for the same endpoint / data,
it will be different due to the auth header token.
Effectively your cache is only caching for that token. So it does not help
other users and also will get a cache miss (even for the same user) when
the token is refreshed.
@leerob <https://github.com/leerob> can you confirm this finding and
advise on a solution? I experimented with patching the cache key code to
accept an additional RequestInit.next option called cacheKeyHeaders
which, if present, will be used and otherwise fallback to current behavior
of using the request headers. It seems to work but I don't want to run
modified framework code in prod if there's a more preferred mechanism for
handling this use case.
—
Reply to this email directly, view it on GitHub
<#51279 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ATQKX2IOPFCSRKDFUITFPZLX35SMXANCNFSM6AAAAAAZGAWEPM>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
I am also interested in a solution to this. I have an application backend endpoint that will return similar data but is only accessible to authenticated users. I would like to cache this request, but currently cannot using the nextJS |
Beta Was this translation helpful? Give feedback.
-
I'm also interested in a solution here. I've got a service where only authenticated users can request some data, but the data will be the same for everyone, so I need them to have the same cache key even though they use a different authorization header. This seems like a huge oversight on the part of the Next team... of course many cacheable APIs will be behind user authentication. |
Beta Was this translation helpful? Give feedback.
-
For me, I do like @dbk91 comment above. But use static token or API Key. For example OAuth Client Credential grants token or Machine to Machine Authentication. Why I am not using User Personal Token because it is dynamic token so it can not be used here. I have test it by putting It works because I did not use Cookies, maybe if I use Cookies and putting that Cookies into Authorization header, the For example:
|
Beta Was this translation helpful? Give feedback.
-
Hey folks, What you can do in this case is move the authentication to a middleware or a proxy server in front of your Next app, and then use static rendering. This is what I describe here: https://www.smashingmagazine.com/2022/07/new-pattern-jamstack-segmented-rendering/ This is for caching a render that is the same for multiple users. It's also ok to just cache the fetched data using "node-cache" or Next.js "unstable_cache", be it for a single user or multiple users, you just need to be careful on managing the cache. You will have one new render per request, but it will be fast if the data are already there in memory, data fetching is way slower than rendering a React page usually. Edit: after rereading, I feel like the question seems to conflates 2 things:
Either way caching data "manually" would work, and segmented rendering could apply, but it's important to be clear about whether your data is user-specific or not and whether your are authenticating the user, or your Next app. |
Beta Was this translation helpful? Give feedback.
-
I think i have imagined a workaround for this, it works in my mind:
Limitations:
Didn't tried yet, but I will experiment it in the next days 🤞 |
Beta Was this translation helpful? Give feedback.
-
Easy to solve using unstable_cache |
Beta Was this translation helpful? Give feedback.
-
Hi all,
I am currently working on a project that uses the new App directory. Now this project fetches data from a API that i need to Auth towards to when fetch to endpoints.
Now i don't want to make a API request on every page request and want to cache the result from the cache for like 30 mins. After reading a bit on the documentation and google, apperently the fetch that has headers and/or Authorzation, the results are not cache.
I could not find a method somewhere in the documentation that talks about a sollution for this. But i can't be the only one that wants to cache these results.
With the cache i mean that i would be saved server side, and that every user just get the cached version if someone else already made a request.
Can someone help me a bit with a example or code on how to cache these results?
Beta Was this translation helpful? Give feedback.
All reactions