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

Sorry it was another my fault...

The key thing is that isLoading is not a server-render guard.

A render can still reach your !data branch on SSG/SSR because:

• the query may be disabled / idle (!data, but not loading)
• the query may have already moved to an error state
• React Query does not make render-phase side effects safe on the server

In v5, isPending is the better “no data yet” flag. isLoading is narrower (pending && fetching). So this shape is safer:

if (query.isPending) return <Spinner />
if (query.isError) return <ErrorUI />
if (!query.data) return null

And anything like alert, router.push, removeQueries, etc. should live in useEffect, a router loader/action, or server redirect logic — not inside render.

If you need the server build to wait for the query, that usually means prefetching / hydration or using suspense-oriented flow instead of relying on isLoading during render.

The mechanism comes down to how v5 derives isLoading. It is not "the query has no data yet" — it is isPending && isFetching, i.e. "a first fetch is currently in flight."

During a Next.js server render (SSG/SSR) the query is created but never actually fetches: without prefetchQuery + HydrationBoundary, React Query does not run the queryFn on the server, so the observer renders as status: 'pending', fetchStatus: 'idle'. That means isPending: true but isFetching: false, and therefore isLoading: false.

So Block A is skipped because isLoading is false on the server even though there's no data. Then !data is true (nothing was fetched or hydrated), so you fall straight into Block B and hit alert() / router.push().

Your three questions directly:

1. It does not transition to error or success on the server. It stays status: 'pending', data: undefined. isLoading is false only because fetchStatus is idle (no in-flight request), not because the status changed.
2. No — isLoading is not guaranteed true on the first server render. isPending is (there's no data), but isLoading additionally requires isFetching, which is false during SSG.
3. It's less "detects a non-browser environment" and more "there is no fetch lifecycle during the synchronous server render, so fetchStatus never leaves idle." Without prefetch + hydration the query simply renders pending+idle on the server.

Fix the guard by branching on isPending (or status === 'pending') instead of isLoading:

const { data, isPending, isError } = useQuery({ /* ... */ })

if (isPending) {
  return <DefaultLayout><Spinner size={40} /></DefaultLayout>
}

if (isError || !data) {
  // ...
}

Because isPending is true on the server, Block A renders during SSG and the side-effect block is never reached. (Keeping alert/router.push inside useEffect is still the right place for them, but isPending is what actually makes the server render stop at the loading state.)

Mental model for v5:

• isPending → status === 'pending' → no data yet
• isFetching → fetchStatus === 'fetching' → a request is in flight
• isLoading → isPending && isFetching → only true while a first fetch is actually running

Refs: https://tanstack.com/query/latest/docs/framework/react/guides/queries and https://tanstack.com/query/latest/docs/framework/react/guides/ssr