`HydrationBoundary` prefetching only gives stale data. #6397

pzxmsry · 2023-11-18T15:52:15Z

pzxmsry
Nov 18, 2023

I tried testing out HydrationBoundary with NextJS for server-side rendering of a component showing a random number.

As in documentation ("Advanced SSR guide"), I've used HydrationBoundary in a server rendered component, prefetched data there, and passed the data to a client component, the code is given below.

But the correct data is shown only once: when I load the page for the first time after the application starts.

The layout:

// imports not shown
export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function MainLayout({ children }: { children: ReactNode}) {
    const queryClient = getQueryClient();

    const data = await getTest();

    await queryClient.prefetchQuery({
        queryKey: ["basic"],
        queryFn: () => Promise.resolve(data)
    });

    return (
         <html lang="en">
            <head>
                <meta charSet="utf-8"/>
            </head>
            <body>
                <Providers>
                    <HydrationBoundary state={dehydrate(queryClient)}>
                        <HeaderComponent />
                    </HydrationBoundary>
                    <div className={"flex"}>
                        {children}
                    </div>
                    {data}
                </Providers>
            </body>
        </html>
    )
}

The header component

"use client";

// imports not shown

export const dynamic = "force-dynamic";
export const revalidate = 0;

export default function HeaderComponent() {
    const client = useQueryClient();

    const {data, isLoading, isError} = useQuery({
        queryKey: ["basic"],
        queryFn: getTest
    });

    console.log(useQueryClient().getQueryData(["basic"]));

    if (isLoading) return <div>Loading</div>;
    if (isError) return <div>Error</div>;

    console.log(data);

    return (
        <div>{JSON.stringify(data)}</div>
    );
}

It seems like the data is prefetched (since isLoading or isError are never true), but it only shows the random number from the first time the getTest function was executed (it is just a fetch to a rng api).

I have searched and tried different solutions (at first, thought the problem is with NextJS framework itself), but nothing worked.

TkDodo · 2023-11-25T16:00:31Z

TkDodo
Nov 25, 2023
Maintainer

when would you expect it to revalidate? I would:

expect another fetch on the server when the route is revalidated, like with router.refresh()
another fetch on the client, e.g. if you trigger one from queryClient.refetchQueries(), or from the devtools, or if you have a stale query (the default staleTime is zero) and a smart refetch occurs, e.g. a window focus.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

`HydrationBoundary` prefetching only gives stale data. #6397

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

HydrationBoundary prefetching only gives stale data. #6397

Uh oh!

pzxmsry Nov 18, 2023

Replies: 1 comment

Uh oh!

TkDodo Nov 25, 2023 Maintainer

`HydrationBoundary` prefetching only gives stale data. #6397

pzxmsry
Nov 18, 2023

TkDodo
Nov 25, 2023
Maintainer