Why does useQuery skip the isLoading block and trigger !data side effects during Next.js SSG?

[leehj322]

Context:
I'm using Next.js (SSG) with TanStack Query. I have a standard conditional rendering pattern based on the query state. During the build process, I'm encountering a Prerender Error because the code enters a block containing browser-only APIs (alert, router.push).

Code Snippet:

const { data, isLoading, isError } = useQuery({
  queryKey: something.result.free(id || 0),
  // ...options
});

// Block A: Expected to be rendered during SSG
if (isLoading) {
  return (
    <DefaultLayout>
      <div className="flex h-screen items-center justify-center">
        <Spinner size={40} />
      </div>
    </DefaultLayout>
  );
}

// Block B: Executed during SSG, causing Prerender Error
if (!data || isError) {
  // Side effects causing Prerender Error on server-side
  queryClient.removeQueries({ ... });
  alert('Invalid access. Redirecting...'); // Crash here!
  router.push('/s/somewhere'); // Crash here!
  return null;
}

The Issue:
During the Next.js build process (SSG), I expected the renderer to stop at Block A because isLoading should be true by default when no initial data or hydration is provided.

However, it seems the renderer bypasses Block A and executes Block B, hitting the alert() and router.push() which are not defined on the server, leading to a build failure.

My Questions (Focusing on Internal Mechanism):
I am aware that moving side effects into useEffect or using typeof window !== 'undefined' checks would "fix" the error. However, I want to understand the underlying mechanism:

1. State Transition on Server: Why does the pre-renderer skip the isLoading condition and enter the !data || isError block during the server-side build? Does useQuery immediately transition to a non-loading state (like status: 'error' or just empty data) on the server if no prefetchQuery is used?
2. SSG Behavior: Is it guaranteed that isLoading is true during the first render on the server? Or does the absence of a fetch environment cause it to resolve to "no data" instantly?
3. Internal Logic: Does TanStack Query have specific logic that treats server-side execution differently regarding the initial loading status when it detects a non-browser environment?

I'd love to understand why this happens internally to write more robust SSR/SSG-friendly code. Thanks!

---

Note to Maintainers:
I suspect this behavior might be closely tied to Next.js's specific pre-rendering engine, but I'm reaching out here to understand the internal state management of TanStack Query in non-browser environments. If this is strictly a Next.js-side behavior, I apologize for the noise, but any insight into how useQuery initializes its state on the server would be immensely helpful!

Thank you for your time and for maintaining such a great library.

[leehj322]

Sorry it was another my fault...