Next.js Discord

Discord Forum

Local cache

Unanswered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Golden northern bumble beeOP
If I fetch some data in a layout, I don't see an obvious way to not fetch it again when another segment (which shares that layout) fetches the same thing.

I can cache it on the server - is that what is expected to be done here (still fetching it though)? Or is this bad practice overall (meaning I should not run into this scenario)?

Example:

- In the /item/[id] layout I fetch data for the item with the matching id so we can display the name and some of the other "metadata" as part of the shared layout ui.

- Imagine there is a link that goes to /item/[id]/edit which is part of the same layout. How do I access the data we fetched in the layout on this page without it re-fetching? Since the data already exists in the browser, it makes sense to me that I should be able to instantly get it and not require a refetch, unless I revalidate or mark it in someway to always fetch, right?). My loading ui displays because of this when its just performing the same fetch as the layout just did before navigating to the edit segment.

- Maybe the issue is my data is not granular enough? But what happens when I need any data from the layout regardless (like the metadata for whatever the purpose may be).

Does this make sense?

40 Replies

Golden northern bumble beeOP
Bump
Bashamega
Your question makes sense
Sorry for the late reply
To fix this issue by using client-side caching. U can use a library like SWR or React Query.
This is an example with SWR:
import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

function Layout({ id }: { id: string }) {
  const { data, error, isValidating } = useSWR(`/api/item/${id}`, fetcher);

  if (!data) return <div>Loading...</div>;
  if (error) return <div>Error loading item</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <Outlet /> {/* Render nested routes */}
    </div>
  );
}

This way, when navigating to /item/[id]/edit, the cached data is instantly used, and a refetch happens in the background (if configured to revalidate).
Macao paper wasp
If you're using the App Router, and you're doing fetching within a Server Component, the caching is done automatically in the fetch call (exclusive to Next.js).

So if you fetch the same URL in other components of your application, Next.js will always serve the cached Fetch call.
right?
Also thank you @Bashamega - I was hoping I would be able to do this without bringing in SWE/react query, but it might be best approach
@Golden northern bumble bee yes but that is still making a network request to get the "cached" call
Macao paper wasp
The network request would happen server-side, clientside you only get HTML and data from the Next.js server. If it's cached, there's no request going on server-side.
Once the cache gets invalidated by the configuration, or manually by something like ISR, once you fetch a route that uses that React Server Component that calls the fetching, the server would make the network request to the service you're using.
Golden northern bumble beeOP
right, so upon navigation to another route that has a server component which makes the same fetch (on the server) it will use the cached fetch (unless invalidated for some reason)
I will try that and see how it behaves but I think my understanding of it was wrong
Macao paper wasp
Exactly
No worries it's very confusing
This jump of split backend/front to a mixed landscape confused me for long.
Golden northern bumble beeOP
So the fetch is not really happening (but the fetch TO THE CACHE on vercel might be?)
like it still needs to get the "cached" version of that fetch somewhere
Macao paper wasp
Exactly, Next.js intercepts your fetch call, checks if the route was fetched before, checks if it's invalidated, and either returns the cache or calls again (all from the server, no client involved for RSC)
@Golden northern bumble bee like it still needs to get the "cached" version of that fetch somewhere
Macao paper wasp
Yea that cached version would be located in your Next.js server.
Golden northern bumble beeOP
Ok that makes sense! Any idea if thats like negligible in terms of speed or?
I assume the cached version is basically near instant
Macao paper wasp
I would assume too, but I haven't made tests myself.
That's what they advertise lol
Golden northern bumble beeOP
I guess we will see haha,\
Thank you, ill report back once I try it out
Macao paper wasp
If you want to understand better RSC this article series is very good
https://demystifying-rsc.vercel.app/
@Golden northern bumble bee Thank you, ill report back once I try it out
Macao paper wasp
sure fam let me know :D
Important note btw, caching is disabled on development mode
It's something most people stumble with
Golden northern bumble beeOP
Oh yeah forgot about that
so NO CACHING will take place in dev mode
unless its like layout right?
between navigations, maybe even then its not?
Macao paper wasp
I think it's always disabled, but can't remember if it's enabled in some scenarios.
Like all fetch calls will always make network calls
Golden northern bumble beeOP
Ok yeah I think it remains for navigation where layout is not going to re-render
but I think if something is re-rendering it will never use a fetch cache like u said
Macao paper wasp
Didn't know that, thanks