The same code runs once on the server and once in the browser. Problems at that boundary rarely surface as errors. They pile up in the logs. This series takes those problems one at a time and traces each one down to its cause.
◆ SERIES · 1 POSTS
Rendering Boundaries
Server Functions cannot be called during initial render. It started with an error that never showed on screen and only piled up in the logs. This series follows the React Query, React and Next.js sources down until the answer came out, and records the places where I guessed wrong, with the numbers that proved it.
README
01 ITEMS
All posts
in order
01
Rendering Boundaries[1]: Server Functions cannot be called during initial render
I traced an error that was piling up in DataDog at about 3,000 a week. The cause was that useSuspenseQuery runs queryFn during render, before commit, and a Server Function was sitting inside it. Instead of the advice to switch to useQuery, I pulled the read function out of the use server file and the error went to zero. But when I measured 30 runs in the same sandbox, the requests came back as 60. The server and the browser have different queryClients.