Why do nextjs sends multiple fetch requests from server side components
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
I have a fetch call in my root layout.tsx to pass data to a client side react context to provide initial data for my client
when I inspect the backend logs I see for every full page refresh I send 6 request for a single fetch call
when I inspect the backend logs I see for every full page refresh I send 6 request for a single fetch call
Answered by Asiatic Lion
I found out it was a weird bug with posthog provider that caused the rerender of layout in dev environment
ty for your time @B33fb0n3
ty for your time @B33fb0n3
4 Replies
@Asiatic Lion I have a fetch call in my root layout.tsx to pass data to a client side react context to provide initial data for my client
when I inspect the backend logs I see for every full page refresh I send 6 request for a single fetch call
maybe some of them are due to
reactStrictMode. To avoid them, make sure to wrap them into React.cache. When the same request is made again, the cache will be usedAsiatic LionOP
i have this outside of layout component
and in the layout compoenent use it like this
still requests sends out multiple times
const getUserDetails = cache(prefetchUserDetails)and in the layout compoenent use it like this
const defaultValues = await getUserDetails()still requests sends out multiple times
@Asiatic Lion i have this outside of layout component
`const getUserDetails = cache(prefetchUserDetails)`
and in the layout compoenent use it like this
`const defaultValues = await getUserDetails()`
still requests sends out multiple times
hm pretty weird. Can you provide a repro of the issue for example via github or https://codesandbox.io/ ?
Asiatic LionOP
I found out it was a weird bug with posthog provider that caused the rerender of layout in dev environment
ty for your time @B33fb0n3
ty for your time @B33fb0n3
Answer