This error appears when using a server action for data fetching and calling it during rendering of a client component on the server.

⨯ Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

Is there a technical or design reason why you can't use a server action for data fetching and have it kick off during the initial render of a client component?

What I really want to do is use React Query's useSuspenseQuery function to automatically start a fetch via a server action and stream the results + use the same method for later refetching on the client.

It seems like with this limitation you'd have to basically define two different mechanisms for getting the data (server action for when its on the client, and some other fetch call for the initial run on the server..)

See this issue on React Query for a code example

https://github.com/TanStack/query/issues/6591