next.js: Fetch being called twice when invalidating
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
Node: 16.15.0
npm: 8.5.5
Yarn: 1.22.19
pnpm: 7.5.0
Relevant packages:
next: 13.1.2-canary.1
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/patrick91/next-cache-exploration
To Reproduce
Using the repo:
To run, start the backend first, you can do so by using docker:
cd backend
docker build -t next-backend-for-cache .
docker run -p 8000:8000 next-backend-for-cache
Then in another terminal:
cd frontend
pnpm i
pnpm run build
pnpm start
Now you can go to http://localhost:3000 and see the requests done to the backend service in its terminal
Describe the Bug
I’ve tried the following code to do a fetch request in a page in the new app dir:
export default async function Home() {
const query = `
query {
country(code: "CH") {
name
}
}`;
const qs = new URLSearchParams({ query });
// const url = `http://localhost:8000?${qs.toString()}`;
const url = `http://localhost:8000`;
const data = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ query }),
next: {
revalidate: 5,
},
}).then((res) => res.json());
return (
<pre>
<code>{JSON.stringify(data, null, 2)}</code>
</pre>
);
}
It seems to work well and cache things as explained in the doc, but when it tries to invalidate it calls the endpoint twice as shown in the video below:
https://user-images.githubusercontent.com/667029/211041628-8bdd4ca2-342c-43f5-8fcb-91dfec0c0b6f.mp4
I’m uncertain if this is expected. I think it should only do a call and I haven’t found anything related to this behaviour.
On top of that, the request is a POST request, not sure if we intend to cache them as well 🤔
Expected Behavior
The backend service should be only called once per invalidation.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
next start
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 11
- Comments: 18
Same issue here in v13.2.4. Not only the
fetch
did twice, but also the page rendered twice on the serversame here on 13.4.19 with app directory. In prod env, everytime when I login and router.push to the home page site where I do the SSR data fetching at layout.tsx, it’ll fetch twice, but after that every refresh only causes one single fetching.
In addition, it’s weird that if I set reactStrictMode: false at the next.config.js file, then it’ll be settled down in dev env. I’m confused how come it goes well with that? I mean what the reactStrictMode does here with SSR?
Update: it still happens on nextjs14
Unfortunately, everyone is alone in this matter. NextJS takes consolation by warning you that the fetch API is experimental.