Double hydration caused by double initial render with Next.js when using rewrites

[bennettdams]

Hey! I was close to submit a GitHub issue, because I thought that RQ's hydration triggers a second initial render with Next.js.
Turns out, Next.js itself renders a second time under specific circumstances, which also results in a double hydration with RQ.

This causes massive problems for me, as Date objects of the hydrated data will therefore trigger useEffects all over the place, because of missing referential equality in the dependency arrays.

I wanted to ask whether you think it would be valuable to add this to the "SSR caveats" section of the docs?

And mabye one of you is already aware of this and has found a nice solution for React Query?

[TkDodo]

sure, please update the docs. we have some proposals for changing hydration in v4, in preparation of react18. see: #3173

[bennettdams]

Done.

[Ephem]

Hmm, interesting case! A minimal codesandbox demonstrating the problem would help me understand, but I know that can be tricky to set up in this case. Why do Dates differ between the two hydrations?

Queries shouldn't hydrate if there is already a query with newer or the same timestamp in the cache, as seen on these lines in the implementation, so maybe something else is going on here?

[bennettdams]

@Ephem Thanks for chiming in.
I think it may very well be that there is something else going on, but my knowledge is not enough to find out.

I created a StackBlitz which reproduces the problem:

https://stackblitz.com/edit/nextjs-nqffuu?file=pages%2Findex.js

I didn't find a good way to "show" the double initial render, so you unfortunately have to open the browser dev tools and look at the console logs.
Also, this does not happen when you go to a route programmatically - the route has to be accessed directly. With StackBlitz, you can do that via the integrated URL. You can copy each route via the home page of the example app.

There are two routes prepared. Both render the date and also have a useEffect to log when date has changed (dependency array => referential equality).

export function ShowDate({ date }) {
  useEffect(() => {
    console.log('date has changed');
  }, [date]);

  return <p>{date.toISOString()}</p>;
}

1. /route-with-props
   Does not use React Query, it just passes data via props. When you go to that route and look at the logs, you can see that date has changed two times: once initially and then AGAIN because of the described Next.js behavior for rewrites. This route confirms that this problem exists even without React Query.
2. /route-with-hydration
   Does use React Query with hydration. It creates the same outcome.

For both routes, the date is changed twice instead of once:

I also added a primitive (number), but as you can see it has (correctly) only changed once - instead of twice like the date object.

Maybe this also has something to do with the de-/serialization that Next.js needs for Dates?

Let me know if I should create a repo with the same content so you can test it out locally if you want to investigate further.

[Ephem]

Thanks for the reproduction!

The reason you are getting the Date object changed twice is because of improper memoization. In the /route-with-props route, you are creating a new Date() inside of render, which means that will be a new identity on every render, so even if Next wouldn't double render this, something else probably would and you would get this problem anyway.

In the /route-with-hydration, you are creating a new Date() in the deserialization function, which gets called in render, so you get the same problem.

If you memoize those, the problem goes away, as you can see in this fork I created. 😃

[bennettdams]

@Ephem I always thought it's needed to memoize the result of the queries, which brings a lot of overhead, but "just" memoizing the dehydrated state seems obvious now, it is the single "entrypoint". Thanks!
@TkDodo Should I update the caveat in the docs by adding this tip ("memoize the dehydrated state")?