Requests are not deduplicated
Unanswered
Large oak-apple gall posted this in #help-forum
Large oak-apple gallOP
Looks like my project is not deduplicating requests during build time. Same endpoints gets hit multiple times (count at backend) resulting in tens or hundreds duplicate requests.
All requests in project are performed like following
Package version is 13.4.10
How to fix it?
All requests in project are performed like following
// imported from another file
const nextRevalidate = {
revalidate: 60,
}
const getSiteVariables = async function () {
const res = await fetch('http://localhost:4000/api/globals/siteVariables', {
next: {
...nextRevalidate,
},
})
if (!res.ok) {
console.log(res.statusText)
throw new Error('failed to fetch site variables')
}
return res.json()
}Package version is 13.4.10
How to fix it?
18 Replies
@Large oak-apple gall Looks like my project is not deduplicating requests during build time. Same endpoints gets hit multiple times (count at backend) resulting in tens or hundreds duplicate requests.
All requests in project are performed like following
js
// imported from another file
const nextRevalidate = {
revalidate: 60,
}
const getSiteVariables = async function () {
const res = await fetch('http://localhost:4000/api/globals/siteVariables', {
next: {
...nextRevalidate,
},
})
if (!res.ok) {
console.log(res.statusText)
throw new Error('failed to fetch site variables')
}
return res.json()
}
Package version is 13.4.10
How to fix it?
I wonder if this is because of the import? Can you recreate it by defining it without the import?
like
fetch('http://localhost:4000/api/globals/siteVariables', {
next: {
revalidate: 60,
},
})Large oak-apple gallOP
Same result with hardcoded value
@Large oak-apple gall Same result with hardcoded value
try adding
use server inside of your functionconst getSiteVariables = async function () {
'use server';
const res = await ...I'm wondering if it's getting bundled with your client components
Generally, you don't want to fetch from the client but for revalidation it's valid. Does the data change often?
Large oak-apple gallOP
It imports server-only package, as suggested in docks. And function is called from server components only
It throws error any time I try to use it in client components
@Marchy Generally, you don't want to fetch from the client but for revalidation it's valid. Does the data change often?
Large oak-apple gallOP
Not often. But it was built before cache tags were added, so frequent timer revalidation is used for most fetches in project
@Marchy Need more code then
Large oak-apple gallOP
It is whole code of this function, there is no more. Consumer is either simple await or await Promise.all
@Large oak-apple gall It is whole code of this function, there is no more. Consumer is either simple await or await Promise.all
I didn't say function, I said I need more code posted. I can't tell from just looking at this what's going on. Has this always happened?
Large oak-apple gallOP
Probably always, only noticed it now
Which other code will help here?
Anything, really. Reproduction steps would be helpful as well
Large oak-apple gallOP
npm run build, just that, no custom webpack configs or such@Large oak-apple gall `npm run build`, just that, no custom webpack configs or such
I mean code reproduction steps
Large oak-apple gallOP
Here is structure of where this function is used, plus few more places
.
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── (main)/
│ ├── clinics/
│ │ └── page.tsx
│ └── doctors/
│ └── [slug]/
│ └── page.tsx
├── components/
│ ├── Footer.tsx -- used in root layout.tsx
│ └── Header.tsx -- used in root layout.tsx
└── utils/
└── getSiteVariables.ts -- declared here