Why does everything in app directory rendered twice?
Unanswered
California pilchard posted this in #help-forum
California pilchardOP
I don't understand whether my setup is wrong or something. I don't think it has anything to do with use strict. Everytime I do something, such as onclick, re render, regardless of whether it's client or server , everything re render twice. For client, memo and callbacks react hooks don't help.
In the next.config.mjs I put logging to fullUrl and I can see that the rsc in the url get different ID.
Can anyone help me with this?
In the next.config.mjs I put logging to fullUrl and I can see that the rsc in the url get different ID.
Can anyone help me with this?
15 Replies
California pilchardOP
From the same path, rsc with different ids
California pilchardOP
Upon further investigation, everything is mounted twice! That's mean there are 2 version of the same components! I have 0 idea why this happens, but I would love to get a solution towards this
Harlequin Duck
I have the same issue. My server components like always render twice in production.
@California pilchard did you ever find a fix?
@California pilchard did you ever find a fix?
Harlequin Duck
nvm. I by accident had a client component in the rootlayout that calls router.refresh on mount.
California pilchardOP
The problem still appear to me, but when I make strict mode false then it fixed. Which makes 0 sense, because strict mode suppose to re-render 2 times but not MOUNTED the component 2 times. It seems like there are a ghost component behind and everytime when I do onClick or something, it triggers 2 times
Australian Freshwater Crocodile
this happens with me on visiting the app, or on refresh, I have logs my middleware and in root layout, and in home page,
I'm getting the logs triggered twice always, it's bad for user experience as the home page is getting rendered twice with different data (as my api return a different home page each time)
can anyone help me debug it ?
I'm getting the logs triggered twice always, it's bad for user experience as the home page is getting rendered twice with different data (as my api return a different home page each time)
can anyone help me debug it ?
@Australian Freshwater Crocodile this happens with me on visiting the app, or on refresh, I have logs my middleware and in root layout, and in home page,
I'm getting the logs triggered twice always, it's bad for user experience as the home page is getting rendered twice with different data (as my api return a different home page each time)
can anyone help me debug it ?
Its not bad user experience if its happening due to react strict mode.
Build your app in production (npm run build) and then run the server (npm start) to test if the problem occurs.
If it does, its NOT react strict thats the problem but your code.
Build your app in production (npm run build) and then run the server (npm start) to test if the problem occurs.
If it does, its NOT react strict thats the problem but your code.
Any external help than this will require more specifics and it would be even better if you put your code on GitHub and share it here
Australian Freshwater Crocodile
it's a server component, and yes it happens in prod
I created a new project and I'll try to replicate it there, the problem is that I'm in a tight deadlines, and I was looking for leads to follow in my debugging
Ahh btw can you take a look a look your browser console as well to see if there are errors?
Australian Freshwater Crocodile
no errors in console, it's just happening on the server
@Clown these are my server logs, this happens on visiting my home page
these are logs from my middleware stack
then you notice the blue one (🔷) is a server action that calls the api
and the 🚀 is my home page (a server component)
these are logs from my middleware stack
then you notice the blue one (🔷) is a server action that calls the api
and the 🚀 is my home page (a server component)
Komondor
Can you share your code