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.

ahuaiqom · 2025-10-22T09:23:23Z

ahuaiqom
Oct 22, 2025

i think ists because server query client create fresh on every request so ur prefectquery always run new
hmm try make the query fn cacheable on the server so repeated renders hit a cached

ts
// used by prefetchQuery and useQuery
export async function fetchPosts() {
  const res = await fetch("https://api/posts", {
    next: { revalidate: 60 },     // or cache: 'force-cache'
  });
  return res.json();
}

If you don’t need SSR on return visits, remove prefetchQuery and let the client useQuery read from its cache (or refetch). You’ll lose SSR HTML for that route, but avoid the server wait.

0 replies

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: 1 comment

Uh oh!

{{title}}

Uh oh!

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: 1 comment

Uh oh!

ahuaiqom Oct 22, 2025

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

H0onnn
Oct 21, 2025

ahuaiqom
Oct 22, 2025