query icon indicating copy to clipboard operation
query copied to clipboard

[react-query] Hydration issue when using the browser back button in App Router

Open badjfas opened this issue 1 year ago • 0 comments

Describe the bug

Description:

In the App Router, a hydration issue occurs when using the browser's back button after a page refresh. The client-side renders first, followed by the server-side execution, which causes the useQuery to be hydrated incorrectly. This results in the initial data being undefined.

Steps to Reproduce:

  1. Click the "next" button to navigate to the next page multiple times.
  2. Refresh the page.
  3. Click the back button in the browser.
  4. Observe that the client renders first, followed by the server execution, causing the useQuery to hydrate improperly.

Expected Behavior:

The useQuery should hydrate correctly with the SSR data, not undefined.

Actual Behavior:

The initial data value is undefined due to improper hydration after navigating back.

Additional Context:

This issue seems to specifically affect scenarios where the client renders before the server-side components execute after navigating back. Any insights or guidance on how to resolve this issue would be greatly appreciated.

Reproduction URL:

You can reproduce the issue by cloning this repository: GitHub Repository Link

Your minimal, reproducible example

https://github.com/badjfas/rsc-hydration-issue

Steps to reproduce

  1. Click the "next" button to navigate to the next page multiple times.
  2. Refresh the page.
  3. Click the back button in the browser.
  4. Observe that the client renders first, followed by the server execution, causing the useQuery to hydrate improperly.

Expected behavior

The useQuery should hydrate correctly with the SSR data, not undefined.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac OS (intel) Chrome Node lts

react 18 next 14.2.5

Tanstack Query adapter

react-query

TanStack Query version

5.51.23

TypeScript version

5

Additional context

This issue seems to specifically affect scenarios where the client renders before the server-side components execute after navigating back. Any insights or guidance on how to resolve this issue would be greatly appreciated.

badjfas avatar Aug 10 '24 05:08 badjfas