Are you supposed to see request in network tab if fetching data on server?

[Rc85]

I was under the impression that if I do the fetching on a server component, I will not see the request in the network's tab and I should see the data right away upon completing page load?

I am following the app router's tutorial here, but I'm still seeing the request in the network's tab and moreover, the loading indicator from the isLoading state.

Can someone enlighten me?

[TkDodo]

show a codesandbox reproduction please. Likely you're seeing a refetch from the client.

[TkDodo]

    queryFn: () =>
      fetch("https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8"),

you're returning the whole fetch response, not just the .json() part. This isn't serializable

[Rc85]

I'm an idiot lol. Fixed it but now I'm getting Maximum call stack size exceeded and it seems to be from the HydrationBoundary because if I remove it, it renders.

[TkDodo]

I mean, are you trolling me? Now you return a full axios response and not just the .data part, and that is again a recursive, non-serializable thing 🙄

[Rc85]

That's strange because that's how I've been doing it in my personal projects and it works. Anyways, I fixed it now and as you can see in the network tab, the request to mock.io is there. Can you confirm I set up the prefetch and useQuery correctly?

With all due respect, I was not trolling you.

[TkDodo]

Likely you're seeing a refetch from the client.

this is still the case. With the default staleTime of zero, data gets into the cache from the server, but then you get a refetch on the client.

this is well documented: https://tanstack.com/query/v5/docs/framework/react/guides/ssr#full-nextjs-pages-router-example

  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000,
          },
        },
      }),
  )