Next.js keeps calling page.tsx resulting in multiple network requests
Answered
Double-striped Thick-knee posted this in #help-forum
Double-striped Thick-kneeOP
when using loading.tsx inside dynamic routes, nextjs keeps calling page.tsx multiple times until loading state is finished, like 2 to 50 times. resulting in huge numbers of fetch requests in network log. is it intended?
Answered by Double-striped Thick-knee
for those who is having the same issue : https://github.com/vercel/next.js/issues/61117
it's a bug in nextjs
to fix this, you can update your nextjs to
it's a bug in nextjs
14.1.0to fix this, you can update your nextjs to
14.1.1-canary.5238 Replies
Gray-tailed Tattler
Let's see the code for page.tsx
@Gray-tailed Tattler Let's see the code for page.tsx
Double-striped Thick-kneeOP
it only happens when loading.tsx is present.
look at the log, it's logging twice but not consistent
Gray-tailed Tattler
are you noticing this on a page with a bunch of links to that dynamic route?
@Gray-tailed Tattler are you noticing this on a page with a bunch of links to that dynamic route?
Double-striped Thick-kneeOP
this is the static route,, page.tsx
and it's the dynamic routes page.tsx
nothing much is going on
Gray-tailed Tattler
let's see your network tab with the requests you mentioned
dynamic route is client or server?
@Gray-tailed Tattler dynamic route is client or server?
Double-striped Thick-kneeOP
server
look at 7 and 8
an hour ago it fetched the same content 50times in a row but not happening that right now
Gray-tailed Tattler
did you have
prefetch={false} on those links at the time?Double-striped Thick-kneeOP
nah, i added it like 10min ago
Gray-tailed Tattler
ya so that's why
the links came into the viewport so they were prefetched, causing the fetch call for each and every individual dynamic route
Double-striped Thick-kneeOP
when i was clicking a link, it fetched the data like 50 times until the loading state for dynamic route finished, it was happening for each links, but I am not able to recreate the same issue right now even if I change prefetch to true, tho I can't figure out why it's fetching the same content 1 to 3times even now
Gray-tailed Tattler
so even when those links are no where on the page, you're still seeing the 50+whatever requests?
@Gray-tailed Tattler so even when those links are no where on the page, you're still seeing the 50+whatever requests?
Double-striped Thick-kneeOP
yeah suppose I clicked on a Link, it was sending 50+ requests to the server, and then finally showed me a post with a title and body, it felt like I keep on sending requests to the server for 1ms interval until server sends me a response back
so it didn't happen before i clicked any Link component, and u saw it yourself, there are no Link components in dynamic route
Gray-tailed Tattler
weird. are you running in the dev server?
Double-striped Thick-kneeOP
yeah,
Gray-tailed Tattler
maybe show the complete code for the "index" page and the dynamic route
Double-striped Thick-kneeOP
actually I don't have that old code anymore that was creating 50+ requests, tho my current one is sending 2 requests, and sometimes rarely 3 requests
should i send you the current one?
Double-striped Thick-kneeOP
bruh nextjs acting really weird, when I use <Skeleton /> component inside loading.tsx, it sends 2requests, but when i just type loading as a text, it sends 3 requests 🫡
Gray-tailed Tattler
i sent the link to the pages router before, this is app router Link https://nextjs.org/docs/app/api-reference/components/link#prefetch
what happens if you use
prefetch={null}Double-striped Thick-kneeOP
null isn't assingable to type boolean error
since I'm not sending 50+ requests anymore so maybe it's alright, 3 requests won't break my 2page app. thanks for your help
Gray-tailed Tattler
or just remove the prop
ya who knows what it was. wait to debug it until it occurs again
Double-striped Thick-kneeOP
yah, waiting for that
Double-striped Thick-kneeOP
for those who is having the same issue : https://github.com/vercel/next.js/issues/61117
it's a bug in nextjs
to fix this, you can update your nextjs to
it's a bug in nextjs
14.1.0to fix this, you can update your nextjs to
14.1.1-canary.52Answer