how to opt-out of request memoization?
Answered
Jumbo flying squid posted this in #help-forum
Jumbo flying squidOP
So i saw in the docs that GET requests are cached for the request lifetime (if using same url/params it will, return same value).
What if you have a url like "https://someurl.com/getRandomNumber" that returns a random number via GET? so on your server componants you call it a few times, and expect a random # each time?
I guess you could add a junk random param at the end like
What if you have a url like "https://someurl.com/getRandomNumber" that returns a random number via GET? so on your server componants you call it a few times, and expect a random # each time?
I guess you could add a junk random param at the end like
https://someurl.com/getRandomNumber?random=${new Date().getTime()} then the url wouldn't be memoized. But curious if there is another way to do it built into the nextjs fetch(), like adding a no-cache param.Answered by Australian Freshwater Crocodile
“Use client” means you’re gonna send that chunk of JavaScript to the browser, which means you’re rending React code and components so React can work with the Virtual DOM and hydrate it to attach event handlers, refs and run useEffects
40 Replies
Jumbo flying squidOP
Note; in the "Opting Out" section of the docs, it says "To manage individual requests, you can use the signal property from AbortController. However, this will not opt requests out of memoization, rather, abort in-flight requests." That seems more about killing the request vs opting out of caching.
I think i found answer ... https://nextjs.org/docs/app/api-reference/functions/fetch
there is a no-store cache setting ...
Wish it was listed in the other side of the docs here:
https://nextjs.org/docs/app/building-your-application/caching#opting-out
there is a no-store cache setting ...
Wish it was listed in the other side of the docs here:
https://nextjs.org/docs/app/building-your-application/caching#opting-out
Jumbo flying squidOP
hmmmm i now see Request Memoization and Data Cache are 2 different kinds of cache, but they both work because they extend fetch() ? Maybe the no-cache only works for Data Cache and not Request Memoization (as they start mentioning it only in the Data Cache section)? eh im still reading down the Caching docs page, so maybe ill eventually figure it out
@Jumbo flying squid hmmmm i now see Request Memoization and Data Cache are 2 different kinds of cache, but they both work because they extend fetch() ? Maybe the no-cache only works for Data Cache and not Request Memoization (as they start mentioning it only in the Data Cache section)? eh im still reading down the Caching docs page, so maybe ill eventually figure it out
for request memoization, one of the workarounds is to pass a random id like date to the server
you might need to set
next : { revalidate: 0} to opt outin fetch args
Jumbo flying squidOP
if you call a fetch with fetch(
Will you have in that request both a Data-Cache and Request Memoization? (and the latter will die when the request is done, but the former sticks around?).
assume its a GET so it gets RequestMemoized
https://someGETurl.com/api, { cache: 'force-cache' })Will you have in that request both a Data-Cache and Request Memoization? (and the latter will die when the request is done, but the former sticks around?).
assume its a GET so it gets RequestMemoized
just trying to see how they are related and can they overlap like that
as the latter (Request Memoization) i think i read are ONLY for GETs
Can force-cache can also force the app the RequestMemoize POSTs? (in addition to adding to the permanant DataCache)
Australian Freshwater Crocodile
What’s your next.js version? GET requests aren’t cached by default anymore
Neither is fetch
@Australian Freshwater Crocodile Neither is fetch
Jumbo flying squidOP
thats how i read the latest 15.1.7 documentation:
says it only applies to GET method in fetch requests, so i assume it always caches them.
(for the temporary request-memoization, not data caching i guess)
Australian Freshwater Crocodile
Request memoization is different from cache
It’s just to de-dupe requests when executed in the same render phase
Jumbo flying squidOP
its different, but doesn't both occur at the same time in some case like 1st case below:
in the force-cache example^.
Australian Freshwater Crocodile
As far as I know, request memoization will always hit once per request
If you call the same function within the same render pass it’ll hit the data source once and all the rest will pull from the in-memory cache
As for Data cache, you need to explicitly mark it as “force-cache” in order for Next,js to cache the return value
Jumbo flying squidOP
i am starting to pick it up slowly ... I'll do more reading.
btw do you have documentation page that says NextJS doesn't cache (well the RequestMemoize cache i mean) GETs anymore with fetch?
btw do you have documentation page that says NextJS doesn't cache (well the RequestMemoize cache i mean) GETs anymore with fetch?
Australian Freshwater Crocodile
Mmmh look for the “breaking” changes from next 14 to 15
Caching is tricky I read the whole docs before and I forgot some stuff and haven’t read it again since they changed the docs for next 15
Jumbo flying squidOP
i definately will spend a few days just looking at it again and some youtube vids. This whole ecosystem is powerful but confusing at same time 🙂
"Next.js uses the React Server Component Payload and Client Component JavaScript instructions to render HTML on the server." like what does this mean... i wouldn't think Client Components matter onthe server. they get passed to Browser for React to do its thing i would have thought. is Client Component's Javascript running on the Server?
Australian Freshwater Crocodile
Yes, all components both server and client components render on the server in order to send HTML to the browser so you can get instant UI instead of a blank screen
But client component render on the server just got the first time
“Use client” and “use server” don’t define where the components render
Australian Freshwater Crocodile
“Use client” means you’re gonna send that chunk of JavaScript to the browser, which means you’re rending React code and components so React can work with the Virtual DOM and hydrate it to attach event handlers, refs and run useEffects
Answer
Jumbo flying squidOP
i remember reading how "use client" sets a boundary, so basically everything under it at that point has to be a client component (well but it can still pass results of Server Component to it via props).
Australian Freshwater Crocodile
Yes anything under the “use client” boundary gets send to the client
Jumbo flying squidOP
so if you import "MyButton" and use it in a client component, its still rendering that to html like <button>mybutton</button> on the server... and sending that and the client component's JS to the browser to do the interactive things React usually does (eventhandlers, reds, useEffect, useStates)
just confusing because docs state its a placeholder vs rendering those client components:
Australian Freshwater Crocodile
Oh what that means is that a “React Server Component” payload is basically a string format of what the React Tree looks like once it’s rendered on the server, but that’s only the output of the React Server Components..
Client components do render on the server for the initial load, but all their JavaScript is sent separately, for React to know which component goes with which chunk of JavaScript code the RSC Payload has placeholders
Client components do render on the server for the initial load, but all their JavaScript is sent separately, for React to know which component goes with which chunk of JavaScript code the RSC Payload has placeholders
Also, if you have a tree of Server Components these will render at different times on the server.
React first renders the Server Components and after all the Server components have rendered then it renders the client components, that’s probably why they need to include placeholders because by the time The React Server Component payload is ready, client components haven’t rendered yet
React first renders the Server Components and after all the Server components have rendered then it renders the client components, that’s probably why they need to include placeholders because by the time The React Server Component payload is ready, client components haven’t rendered yet
Btw, React Server Components != HTML on the browser
This isn’t part of the thread anymore so message me if you wanna discuss anything else. I feel guilty when I pollute threads lol mods are watching us 😱
Jumbo flying squidOP
Thanks for the detailed explanations, i appreciate it. ill send you a friend request :).