await queryclient.prefetch() in server component blocking entire root.

[Jens-Mikael]

I currently have a problem in Nextjs where I'm prefetching some data on the server and then hydrating it to the client using <HydrationBoundary state={dehydrate(queryClient)} />.

The fetch is working fine and the data is instantly accessible on the client when I'm using the traditional useQuery somewhere down the react tree.

The issue that I'm running to is when i update the searchparams, for instance if i want to store a global state that the whole page can accesss (/home?calendarView={monthly || weekly }), the entire page slows down and I can only see the change after around 0.5 seconds. After some investigation i noticed that the queryFn gets called and awaited on the server and therefore, the change from changing for example the calendar view is very slow and weird (this happens also in production). Also in this case using useState wouldn't make sense, since that would require tons of properties being passed through the react tree.

Is there a way to prevent react query from refetching data on the server and avoid blocking the entire root?

Any help would be highly appreciated!

Here is my server component:

import useAuth from "@/src/components/hooks/useAuth";
import ErrorFallback from "@/src/components/sharedLayouts/ErrorFallback";
import CalendarPage from "@/src/features/calendar";
import { getQueryClient } from "@/src/lib/reactQuery/hooks/getQueryClient";
import { currentUserInfoOptions } from "@/src/lib/reactQuery/users/options";
import { allVideosOptions } from "@/src/lib/reactQuery/videos/options";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { ErrorBoundary } from "next/dist/client/components/error-boundary";
import { redirect } from "next/navigation";

export default function Calendar() {

  const { userId, isTokenValid, token } = useAuth();
  if (!isTokenValid || !userId || !token) redirect("/login");

  const queryClient = getQueryClient();
  await queryClient.prefetchQuery(allVideosOptions(token));

  return (
    <ErrorBoundary errorComponent={ErrorFallback}>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <CalendarPage />
      </HydrationBoundary>
    </ErrorBoundary>
  );
}

Here's my getQueryClient:

import {
  QueryClient,
  defaultShouldDehydrateQuery,
  isServer,
} from "@tanstack/react-query";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        retry: 2,
        staleTime: 60 * 1000,
        refetchOnReconnect: false,
        refetchOnMount: false,
      },
      dehydrate: {
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === "pending",
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

```

If you want me to provide more files and/or more info, just let mw know!

[TkDodo]

I guess this is the same behaviour as if you did await fetch(...) in a server component. When there is a re-validation (and it seems that next re-validates when a query param changes, don't know) and the server component renders again, it will do what it does.

Since of lately, you can not await the fetch, but pass the promise to the hydration boundary. See: https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

The fetch will still happen on the server, and will be put into the cache, but at least it won't block anymore. If you want to avoid the refetch, you have to add caching on the server. That's an entirely different beast and out of scope for react-query. I have used cachified by Kent C. Dodds in the past for this and it works well: https://www.npmjs.com/package/@epic-web/cachified