Next.js Discord

Discord Forum

How do i know if my fetch request is deduped or not?

Unanswered
MarkMiklos posted this in #help-forum
Open in Discord
MarkMiklosOP
I am logging out caching, if my endpoint called twice and both have a cache hit tag does that mean it is deduped?

28 Replies

@MarkMiklos I am logging out caching, if my endpoint called twice and both have a cache hit tag does that mean it is deduped?
B33fb0n3
that only means, that the cache hitted. So that the server returned the cached value. When you want to dedupe your requests use React.cache(() => {}) for it
MarkMiklosOP
next docs says that using the built in fetch does automatically dedupes the request if force-cache applied, react's cache should be used if you are calling a db for example. Am i dumb or missing out on something? 😄
@MarkMiklos next docs says that using the built in fetch does automatically dedupes the request if force-cache applied, react's cache should be used if you are calling a db for example. Am i dumb or missing out on something? 😄
B33fb0n3
iirc that depends on how you using the fetch. This for example:
// dedupe by Next.js (actually, it's not just dedupe, the request is 0 or 1 time)
fetch(url);
fetch(url);

//dedupe by React (one request)
fetch(url, { cache: "no-store" });
fetch(url, { cache: "no-store" });

// not dedupe in either (two requests)
fetch(url, { method: "POST", cache: "no-store" });
fetch(url, { method: "POST", cache: "no-store" });

Can you share me where you read that fetch requests are automatically deduped by default?
MarkMiklosOP
not by default, I said if you apply force-cache then it is deduped
@MarkMiklos not by default, I said if you apply force-cache then it is deduped
B33fb0n3
Can you share me where you read that
MarkMiklosOP
"If you are using fetch, requests can be memoized by adding cache: 'force-cache'. This means you can safely call the same URL with the same options, and only one request will be made."
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
MarkMiklosOP
it is next 15 docs, no-store is default, u need to apply force-cache, that means you opt into caching
My question is that how do i know if it is opted into deduping that request
@MarkMiklos My question is that how do i know if it is opted into deduping that request
B33fb0n3
check the options that you pass into your fetch function. If we are in next15 and you pass in force-cache the request beeing deduped
MarkMiklosOP
i know it should be, but i want to make sure, like I said is there any way to see for example in the terminal or log to see deduped endpoints? 😄
@MarkMiklos i know it should be, but i want to make sure, like I said is there any way to see for example in the terminal or log to see deduped endpoints? 😄
B33fb0n3
you can check that by creating an endpoint that logs everytime when it gets called. Then create two fetch requests with force-cache on after another and you should see, that the endpoint logs only once
MarkMiklosOP
i figured out that i run strapi locally, so i can see endpoint calls, doesn't matter if i use force-cache or the default no-store

export async function getSpecialities() {
  const response = await fetch(`${process.env.STRAPI_URL}/api/szakterueleteks?populate=*`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.STRAPI_TOKEN}`
    }
  });
  const result = await response.json();
  return result.data;
}

It gets called only once on the photo (szakterueleteks endpoind)
@B33fb0n3 which version are you using?
MarkMiklosOP
im on 15.0.1
B33fb0n3
ah ok
It gets called only once on the photo (szakterueleteks endpoind)
so is your issue already solved like that? 🤔
MarkMiklosOP
my issue is messed up now, cuz by default it shouldn't be deduped, but it is even tho im not 'cacheing' it 😄
@B33fb0n3 how did you called the function getSpecialities?
MarkMiklosOP
const specialities = await getSpecialities();

In both of the components that needs this data
@B33fb0n3 and both components are displayed at the same time?
MarkMiklosOP
Correct, one of them is in the header and the other one is in the mobile sheet which is hidden with css
@B33fb0n3 can you log when the function getSpecialities is called?
MarkMiklosOP
yes I do log out the data and I get this
@MarkMiklos yes I do log out the data and I get this
B33fb0n3
hm weird. Can you create a minimal reproduction? Either with your specific example or by doing this: https://nextjs-forum.com/post/1305465626806063166#message-1305489561077682207 (<--- click)
Share it either as [codesandbox](https://codesandbox.io/) or as github repo, so we can help you further
B33fb0n3
@MarkMiklos ?
MarkMiklosOP
sorry was out of office, I'll make it whenever i will have some spare time 😄