When using `Next.js` and `prefetchQuery,` it always fetches new data. #9788

H0onnn · 2025-10-21T06:43:12Z

H0onnn
Oct 21, 2025

Hello, while testing data fetching using prefetchQuery and HydrationBoundary in a Next.js environment, I encountered a question.

First, I am attaching the source code for the environment I am testing.

// query.ts

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

const makeQueryClient = () => {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
        throwOnError: true,
      },
    },
  });
};

let browserQueryClient: QueryClient | undefined = undefined;

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

// providers.tsx

"use client";

import { ReactNode } from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { getQueryClient } from "./query";

export const Providers = ({ children }: { children: ReactNode }) => {
  const queryClient = getQueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
};

// root layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// page.tsx (RSC)

export default async function TanstackRSCPage() {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });
  
  return (
  <HydrationBoundary state={dehydrate(queryClient)}>
      <PostList />
  </HydrationBoundary>
)

// post-list.tsx

"use client";

export function PostList() {
  const { data: posts, isPending } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 60 * 1000,
  });

  if (isPending) return <div>Loading...</div>;

  return (
    <div>
      {posts?.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </div>
  );
}

When writing code as shown above, accessing the Page always triggers the server to execute prefetch, which then waits for the duration specified by the delay time in the API fetch function.

What I expected was that after the initial prefetch, when leaving and re-entering the page, it wouldn't re-fetch because it uses react-query's cached data. Is this an unavoidable behavior because RSC always renders anew in an SSR environment?

My knowledge is quite limited, so I may have written the code incorrectly. I need help with this.
Thank you to everyone who took the time to read this long post.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

When using `Next.js` and `prefetchQuery,` it always fetches new data. #9788

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

When using Next.js and prefetchQuery, it always fetches new data. #9788

Uh oh!

Uh oh!

H0onnn Oct 21, 2025

Replies: 0 comments

When using `Next.js` and `prefetchQuery,` it always fetches new data. #9788

H0onnn
Oct 21, 2025