Error: Server Functions cannot be called during initial render. This would create a fetch waterfall.
I am trying to use a prefetch in my page (SSR) and then a useSuspenseQuery in my client component to call the same queryOptions
Unfortunately NextJS is complaining about using my function (getThread) as a "use server" function in the initial rendering. One workaround would be to export it twice and wrap it under a "use server" when fetching in client and as "only-server" when SSR. But this is gonna generate a lot of boilerplate.
Any suggestion about best approach to handle this? :prayge:
7 Replies
rare-sapphire•2y ago
I think that's a next limitation yeah
passive-yellowOP•2y ago
yup I was just reading your reply here https://github.com/TanStack/query/issues/6591
https://stackoverflow.com/questions/76761493/react-server-component-error-server-functions-can-not-be-called-during-initial
here someone brings a bit more of context as well
im getting exceptions very often bcs of this…
how is everyone handle this?
or people dont use nextjs + prefetch in server components?
manual-pink•11mo ago
Thank you so much for leaving the comment here. I was able to fix one of the issue I was facing for past couple of hours.
dependent-tan•11mo ago
Hey Cesar, did you ever solve this? I'm hitting the same issue and all the workarounds feel hacky.
other-emerald•10mo ago
My understanding is historically Nextjs and React prefer to have Server Components for the
query and Server Actions for the mutation. Actions for fetching data was discouraged.
This has changed a bit with React 19 and Next 15.1. You need to put the function in its own file and import it. See here https://react.dev/reference/rsc/server-functionsServer Functions – React
The library for web and native user interfaces
dependent-tan•10mo ago
thanks @DogPawHat . that’s kinda disappointing although i understand it’s a nextjs issue. the tan stack docs nextjs example really had me thinking it was gonna work. i see there’s a workaround by making an api route but that feels so dumb.
other-emerald•10mo ago
I think using a server functions will work it just has to be in a different file from the client component