Problem with hydration and refetching Nextjs14 SSR

[leonardo2204]

Hi everyone, thanks for your time reading this and for the great job on this project!

I have followed the Advanced Server Rendering
walkthrough to setup my project.

Beforehand here is my (partial) stack:

"@tanstack/query-core": "^5.18.1",
"@tanstack/react-query": "^5.18.1",
"next": "^14.1.0",
"react": "18.2.0",
"@mui/material": "^5.15.7",

Code snippets:
page.tsx:

export default async function EventSummaryPage({ searchParams }: { searchParams: [key: string, value: string] }) {
    const queryClient = new QueryClient();

    await Promise.all([queryClient.prefetchInfiniteQuery({
        queryKey: ['events'],
        queryFn: ({ pageParam = 0 }) => getEvents(searchParams, pageParam),
        initialPageParam: 0,
    }), queryClient.prefetchQuery({
        queryKey: ['categories'],
        queryFn: getCategories,
    })])

    return <HydrationBoundary state={dehydrate(queryClient)}>
        <RootLayout />
    </HydrationBoundary>
}

RootLayout.tsx:

export default function RootLayout() {
    setDefaultOptions({ locale: ptBR })
    const searchParams = useSearchParams();

    const { data, isLoading, refetch, isRefetching, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
        queryKey: ['events'],
        queryFn: ({ pageParam = 0 }) => getEvents(searchParams as unknown as [key: string, value: string], pageParam),
        getNextPageParam: (lastPage, pages, lastPageParam) => lastPage.has_more_events ? lastPageParam + 1 : null,
        initialPageParam: 1,
        refetchOnWindowFocus: false,
    });

    const categories = useQuery({
        queryKey: ['categories'],
        queryFn: getCategories,
        refetchOnWindowFocus: false,
        staleTime: 24 * 60 * 1000,
    })

    useEffect(() => {
        refetch()
    }, [refetch, searchParams])

    if (isLoading || isRefetching) {
        return <RootLayoutLoading />
    }

    if (data?.pages[0].events.length === 0) {
        return <EmptyEvent categories={categories.data ?? []} />
    }

    const finalEvents = data?.pages?.flatMap((page) => page.events) ?? [];

    return (
        <>
            {finalEvents.map((event: EventSummary, idx: number) => (
                <EventCard event={event} key={`${event.id} - ${event.starts_at}`} idx={idx} />
            ))}
            {hasNextPage ? isFetchingNextPage ?
                <Box
                    alignContent={'center'}
                    display={'flex'}
                    justifyContent={'center'}
                >
                    <CircularProgress />
                </Box> :

                <Button
                    onClick={() => fetchNextPage()}
                    sx={{ p: 4 }}
                >
                    Carregar mais...
                </Button>

                : null}
        </>
    );
}

(real root layout.tsx)

<Suspense
                fallback={
                    <main className={styles.main}>
                        <RootLayoutLoading />
                    </main>
                }
            >
                <main className={styles.main}>{props.body}</main>
            </Suspense>

Where props.body = page.tsx from above

getEvents.ts:

'use server'

export async function getEvents(searchParams?: [key: string, value: string] | null, page = 0)
    : Promise<{ events: EventSummary[], has_more_events: boolean }> {
    let endDate = null

    //@ts-ignore
    const localParams = new URLSearchParams(searchParams);
    if (!!localParams.get('start_date') && !localParams.get('end_date')) {
        endDate = endOfDay(parseISO(localParams.get('start_date')!))
        localParams.set('end_date', endDate.toISOString())
    } else if (!!localParams.get('end_date')) {
        endDate = endOfDay(parseISO(localParams.get('end_date')!))
        localParams.set('end_date', endDate.toISOString())
    }

    if (localParams.get('city_id') === 'my-location') {
        localParams.delete('city_id')
    }

    localParams.append('page', String(page));

    //refresh the cache every 10 minutos (10 * 60)
    const res = await fetch(`${getBaseUrl()}/events/?${localParams}`, { next: { revalidate: 600 } });
    const body = await res.json()

    return { events: body.events, has_more_events: body.has_more_events };
}

The problems I'm facing:

1. It seems that the 'use client' part is re-fetching what comes from the server, and I cannot understand why. Also, the return from the server (which is the very same that the client receives) seems to be broken:

Screen.Recording.2024-02-05.at.11.22.10.mov

Stringfied deydrate(queryClient)

{"mutations":[],"queries":[{"state":{"data":{"pages":[{"events":[{"id":"0d4664db-3938-4705-bbfb-a79012de5484","starts_at":"2024-02-05T12:30:00","ends_at":"2024-02-05T14:30:00","timezone_name":"UTC-3","name":"Evento com descrição gigante ","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/0d4664db-3938-4705-bbfb-a79012de5484/thumb/image_cropper_1677078296743_1024x1024.webp?alt=media","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consectetur odio, vel auctor massa semper cursus. Nullam nisi nunc, scelerisque id tincidunt sit amet, commodo et tortor. In sed tortor diam. Etiam vulputate, erat elementum fermentum pharetra, orci elit varius nibh, sit amet sagittis nibh sapien et tellus. Donec eu lacus id ligula dapibus euismod. Aenean pharetra mi augue, ac rutrum quam iaculis nec. Nulla ultricies lectus mi, vel convallis enim volutpat eu. Praesent nisl diam, ultrices et lectus sed, placerat fermentum metus.\n\nVestibulum convallis nisi vitae dapibus volutpat. Aenean at ante consectetur, bibendum felis sit amet, commodo dui. Proin consequat ultricies aliquam. Vivamus vitae elit et dolor cursus hendrerit. Cras rhoncus dui ante, ac ullamcorper sapien auctor et. Quisque et orci mattis, suscipit leo at, vestibulum mauris. In blandit tincidunt lectus nec pulvinar. Duis faucibus felis vitae condimentum tincidunt. Duis sed est a felis faucibus porta. Donec convallis turpis nibh, lobortis auctor ligula laoreet nec. Morbi pulvinar eu purus ut pellentesque.\n\nUt sit amet blandit mi. Ut condimentum ipsum semper viverra tincidunt. Praesent convallis enim massa, in varius mauris dapibus in. Duis fermentum eros ut lectus gravida, ut tincidunt lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec molestie tortor pellentesque convallis consequat. Etiam non eleifend augue. Vestibulum lobortis bibendum rutrum. Praesent posuere elit ut ligula pulvinar, eget aliquam eros pellentesque. In vulputate arcu in sem congue pellentesque. Pellentesque vehicula lorem eget est egestas, quis tempor ante faucibus. Nunc vel nisl ante. Suspendisse tristique sodales vestibulum. Suspendisse potenti. Phasellus quis tortor a ipsum vehicula accumsan.\n\nwww.google.com\n\nNullam tincidunt fringilla iaculis. Suspendisse potenti. In non ornare mi. Nunc sed lectus et dolor sollicitudin malesuada. Donec a mi ligula. Suspendisse finibus lectus felis, quis suscipit lacus auctor quis. Suspendisse auctor suscipit diam et laoreet. Praesent vitae erat porttitor, eleifend risus vel, cursus eros. Ut egestas purus eu nibh volutpat dictum. Phasellus nunc odio, porttitor vitae laoreet ac, finibus a ante.\n\nhttps://teste.com\n\nPellentesque malesuada accumsan consequat. Etiam nec iaculis purus. Cras aliquet vulputate vulputate. In eget enim odio. Nullam eget iaculis leo, a volutpat risus. Vivamus venenatis ac nulla varius vehicula. In fermentum ex enim, eu semper ex euismod non. Suspendisse potenti. Nullam at eros at nibh ultricies mattis.\n\n#massa\n\nDonec diam tellus, consectetur eu condimentum nec, tristique ut lectus. Aliquam eget eros auctor nibh commodo porttitor. Praesent nulla odio, tempus in ex ac, molestie viverra leo. Etiam nec mi et mauris malesuada pretium vulputate eu leo. Pellentesque neque libero, cursus vel malesuada non, vestibulum nec orci. Donec eu dolor faucibus, rhoncus ipsum eget, eleifend nisl. Aliquam blandit luctus diam. Sed tincidunt euismod lorem vitae varius.\n\[email protected]\n\nPellentesque ut fermentum lacus, ut dignissim lacus. Phasellus turpis justo, aliquet eu nunc id, finibus facilisis tellus. In hac habitasse platea dictumst. Cras pharetra turpis vitae laoreet fermentum. Integer tempor et tellus sit amet porttitor. Duis interdum elit dui, a elementum leo semper vitae. Donec eget odio viverra, sagittis arcu vitae, ultricies velit. Cras porttitor ultrices eros, ut bibendum risus fermentum vitae. Ut ut odio vitae lacus cursus facilisis a ac sapien. Suspendisse elementum lacus vel commodo scelerisque. Sed leo turpis, gravida a libero vitae, hendrerit tincidunt nibh. Nunc at consectetur libero, id tempus neque. Sed rhoncus vehicula risus, eget aliquam risus sollicitudin id. In ligula magna, ultrices eget dignissim ac, venenatis nec orci.\n\n@anitta","promotional_text":"teste","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"R. Pais Leme, 215 - Pinheiros, São Paulo - SP, 05424-150, Brasil","place_id":"c118dfc9-7d7e-484c-bd50-76d40c79b221","place_name":"Casa da Amorilda","place_picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/place-profile%2Fc118dfc9-7d7e-484c-bd50-76d40c79b221%2FIMG_2852.jpg?alt=media","lat":-23.5686377,"lng":-46.6987543},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"659e0302-f347-49e5-a784-d1b8f3dc1b10","starts_at":"2024-02-05T19:00:00","ends_at":"2024-02-05T21:00:00","timezone_name":"UTC-3","name":"G1 daily rec","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events%2F659e0302-f347-49e5-a784-d1b8f3dc1b10%2Fimage_picker387116604.jpg?alt=media","description":"descricao","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"Jardim Analia Franco - São Paulo","lat":-23.5603231,"lng":-46.5506353},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"5cbaf264-aa9f-473d-bfe9-660d77e9a95d","starts_at":"2024-02-05T20:00:00","ends_at":"2024-02-05T21:30:00","timezone_name":"UTC-3","name":"Festa dos Dog","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/5cbaf264-aa9f-473d-bfe9-660d77e9a95d/thumb/image_cropper_1650152157691_1024x1024.webp?alt=media","description":"Só os dog da massa","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"Sumaré - São Paulo","lat":-23.5465628,"lng":-46.68427789999999},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":true},{"id":"4be1cdf5-5f3b-4619-a648-391d5895f74a","starts_at":"2024-02-05T23:30:00","ends_at":"2024-02-06T00:00:00","timezone_name":"UTC-3","name":"adasdsad","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/4be1cdf5-5f3b-4619-a648-391d5895f74a/thumb/images_1024x1024.webp?alt=media","description":"sadsd","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"R. Pais Leme, 215 - Pinheiros, São Paulo - SP, 05424-150, Brasil","place_id":"c118dfc9-7d7e-484c-bd50-76d40c79b221","place_name":"Casa da Amorilda","place_picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/place-profile%2Fc118dfc9-7d7e-484c-bd50-76d40c79b221%2FIMG_2852.jpg?alt=media","lat":-23.5686377,"lng":-46.6987543},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"0d4664db-3938-4705-bbfb-a79012de5484","starts_at":"2024-02-06T12:30:00","ends_at":"2024-02-06T14:30:00","timezone_name":"UTC-3","name":"Evento com descrição gigante ","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/0d4664db-3938-4705-bbfb-a79012de5484/thumb/image_cropper_1677078296743_1024x1024.webp?alt=media","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consectetur odio, vel auctor massa semper cursus. Nullam nisi nunc, scelerisque id tincidunt sit amet, commodo et tortor. In sed tortor diam. Etiam vulputate, erat elementum fermentum pharetra, orci elit varius nibh, sit amet sagittis nibh sapien et tellus. Donec eu lacus id ligula dapibus euismod. Aenean pharetra mi augue, ac rutrum quam iaculis nec. Nulla ultricies lectus mi, vel convallis enim volutpat eu. Praesent nisl diam, ultrices et lectus sed, placerat fermentum metus.\n\nVestibulum convallis nisi vitae dapibus volutpat. Aenean at ante consectetur, bibendum felis sit amet, commodo dui. Proin consequat ultricies aliquam. Vivamus vitae elit et dolor cursus hendrerit. Cras rhoncus dui ante, ac ullamcorper sapien auctor et. Quisque et orci mattis, suscipit leo at, vestibulum mauris. In blandit tincidunt lectus nec pulvinar. Duis faucibus felis vitae condimentum tincidunt. Duis sed est a felis faucibus porta. Donec convallis turpis nibh, lobortis auctor ligula laoreet nec. Morbi pulvinar eu purus ut pellentesque.\n\nUt sit amet blandit mi. Ut condimentum ipsum semper viverra tincidunt. Praesent convallis enim massa, in varius mauris dapibus in. Duis fermentum eros ut lectus gravida, ut tincidunt lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec molestie tortor pellentesque convallis consequat. Etiam non eleifend augue. Vestibulum lobortis bibendum rutrum. Praesent posuere elit ut ligula pulvinar, eget aliquam eros pellentesque. In vulputate arcu in sem congue pellentesque. Pellentesque vehicula lorem eget est egestas, quis tempor ante faucibus. Nunc vel nisl ante. Suspendisse tristique sodales vestibulum. Suspendisse potenti. Phasellus quis tortor a ipsum vehicula accumsan.\n\nwww.google.com\n\nNullam tincidunt fringilla iaculis. Suspendisse potenti. In non ornare mi. Nunc sed lectus et dolor sollicitudin malesuada. Donec a mi ligula. Suspendisse finibus lectus felis, quis suscipit lacus auctor quis. Suspendisse auctor suscipit diam et laoreet. Praesent vitae erat porttitor, eleifend risus vel, cursus eros. Ut egestas purus eu nibh volutpat dictum. Phasellus nunc odio, porttitor vitae laoreet ac, finibus a ante.\n\nhttps://teste.com\n\nPellentesque malesuada accumsan consequat. Etiam nec iaculis purus. Cras aliquet vulputate vulputate. In eget enim odio. Nullam eget iaculis leo, a volutpat risus. Vivamus venenatis ac nulla varius vehicula. In fermentum ex enim, eu semper ex euismod non. Suspendisse potenti. Nullam at eros at nibh ultricies mattis.\n\n#massa\n\nDonec diam tellus, consectetur eu condimentum nec, tristique ut lectus. Aliquam eget eros auctor nibh commodo porttitor. Praesent nulla odio, tempus in ex ac, molestie viverra leo. Etiam nec mi et mauris malesuada pretium vulputate eu leo. Pellentesque neque libero, cursus vel malesuada non, vestibulum nec orci. Donec eu dolor faucibus, rhoncus ipsum eget, eleifend nisl. Aliquam blandit luctus diam. Sed tincidunt euismod lorem vitae varius.\n\[email protected]\n\nPellentesque ut fermentum lacus, ut dignissim lacus. Phasellus turpis justo, aliquet eu nunc id, finibus facilisis tellus. In hac habitasse platea dictumst. Cras pharetra turpis vitae laoreet fermentum. Integer tempor et tellus sit amet porttitor. Duis interdum elit dui, a elementum leo semper vitae. Donec eget odio viverra, sagittis arcu vitae, ultricies velit. Cras porttitor ultrices eros, ut bibendum risus fermentum vitae. Ut ut odio vitae lacus cursus facilisis a ac sapien. Suspendisse elementum lacus vel commodo scelerisque. Sed leo turpis, gravida a libero vitae, hendrerit tincidunt nibh. Nunc at consectetur libero, id tempus neque. Sed rhoncus vehicula risus, eget aliquam risus sollicitudin id. In ligula magna, ultrices eget dignissim ac, venenatis nec orci.\n\n@anitta","promotional_text":"teste","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"R. Pais Leme, 215 - Pinheiros, São Paulo - SP, 05424-150, Brasil","place_id":"c118dfc9-7d7e-484c-bd50-76d40c79b221","place_name":"Casa da Amorilda","place_picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/place-profile%2Fc118dfc9-7d7e-484c-bd50-76d40c79b221%2FIMG_2852.jpg?alt=media","lat":-23.5686377,"lng":-46.6987543},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"ab19ab51-01b4-4441-aa40-3090ad815a7b","starts_at":"2024-02-06T17:00:00","ends_at":"2024-02-06T19:00:00","timezone_name":"UTC-3","name":"Happy hour do Klustr","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/ab19ab51-01b4-4441-aa40-3090ad815a7b/thumb/image_cropper_BF8A1F6E-BD54-4B98-BD96-523A9B7195D0-829-000285437CB98EE3_1024x1024.webp?alt=media","description":"O mais divertido happy hour de sap Paulo!\nConfira:\n\nDois chopps pelo preço de um\n\nDrinks pela metade de preço\n\nCompre um balde de cerveja e ganhe uma porção de petiscos\n","promotional_text":"Compra 2 por 1","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"São Paulo, SP, Brasil","place_id":"c118dfc9-7d7e-484c-bd50-76d40c79b222","place_name":"Klustr Lounge","place_picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/place-profile%2Fc118dfc9-7d7e-484c-bd50-76d40c79b222%2FIMG_2852.jpg?alt=media","lat":-23.5557714,"lng":-46.6395571},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":true},{"id":"659e0302-f347-49e5-a784-d1b8f3dc1b10","starts_at":"2024-02-06T19:00:00","ends_at":"2024-02-06T21:00:00","timezone_name":"UTC-3","name":"G1 daily rec","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events%2F659e0302-f347-49e5-a784-d1b8f3dc1b10%2Fimage_picker387116604.jpg?alt=media","description":"descricao","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"Jardim Analia Franco - São Paulo","lat":-23.5603231,"lng":-46.5506353},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"3667289c-dc0e-4590-ac10-80c12358b09c","starts_at":"2024-02-06T22:30:00","ends_at":"2024-02-07T00:30:00","timezone_name":"UTC-3","name":"Teste","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events%2F3667289c-dc0e-4590-ac10-80c12358b09c%2Fimage_cropper_1693358714584.jpg?alt=media","description":"Esfiha de gorfo","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"Tremembé - São Paulo","lat":-23.45757329999999,"lng":-46.6169034},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":true},{"id":"4be1cdf5-5f3b-4619-a648-391d5895f74a","starts_at":"2024-02-06T23:30:00","ends_at":"2024-02-07T00:00:00","timezone_name":"UTC-3","name":"adasdsad","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events/4be1cdf5-5f3b-4619-a648-391d5895f74a/thumb/images_1024x1024.webp?alt=media","description":"sadsd","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"R. Pais Leme, 215 - Pinheiros, São Paulo - SP, 05424-150, Brasil","place_id":"c118dfc9-7d7e-484c-bd50-76d40c79b221","place_name":"Casa da Amorilda","place_picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/place-profile%2Fc118dfc9-7d7e-484c-bd50-76d40c79b221%2FIMG_2852.jpg?alt=media","lat":-23.5686377,"lng":-46.6987543},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":false},{"id":"3f20c8fd-3e34-4d1c-87d3-aab7ab616147","starts_at":"2024-02-07T11:30:00","ends_at":"2024-02-08T13:30:00","timezone_name":"UTC-3","name":"Happy hour da Firma","picture":"https://firebasestorage.googleapis.com/v0/b/klustr-staging.appspot.com/o/events%2F3f20c8fd-3e34-4d1c-87d3-aab7ab616147%2Fbruno-kelzer-gqFzRq8qncY-unsplash.jpg?alt=media","description":"Evento de vários dias","promotional_text":"Compra 2 por 1","show_guest_list":false,"friends_can_invite_friends":false,"location":{"address_or_place_name":"Consolação - São Paulo","lat":-23.5539749,"lng":-46.655794},"is_private":false,"is_full_day":false,"is_invited":false,"is_blocked":false,"is_recurring":true}],"has_more_events":true}],"pageParams":[0]},"dataUpdateCount":1,"dataUpdatedAt":1707143034477,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["events"],"queryHash":"[\"events\"]"},{"state":{"data":[{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922797","name":"Musicais","icon_name":"music_note","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922798","name":"Espotivo","icon_name":"sports_soccer","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922796","name":"Bar de Esporte","icon_name":"sports_bar","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922799","name":"Restaurante","icon_name":"restaurant_menu","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922790","name":"Balada","icon_name":"language","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922097","name":"Open Bar","icon_name":"liquor","font_family":"MaterialIcons"},{"id":"330265f1-6ee1-4cfc-be3e-51aa6d922090","name":"Rodízio","icon_name":"local_pizza","font_family":"MaterialIcons"}],"dataUpdateCount":1,"dataUpdatedAt":1707143034476,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["categories"],"queryHash":"[\"categories\"]"}]}

2. When re-fetching (when windows focus or actively through ReactQueryDevtools, it breaks. I have narrowed down to this part:

This popup is in this part of react-server-dom-webpack-client.browser.development.js, line 803:
var json = JSON.stringify(root, resolveToJSON);

Bottom line is, am I doing something wrong? Or is there a bug in (any) of the libraries?

Thanks!

[TkDodo]

please show a codesandbox reproduction, it's hard to say from code snippets alone.

It seems that the 'use client' part is re-fetching what comes from the server, and I cannot understand why

I am seeing that the infinite query has no staleTime set, so with the default of zero, an instant refetch on the client is expected. This is well documented in the SSR guide.