Error using useHydrateAtoms with Next.js parallel-routes

[npearson72]

I am using Next.js parallel-routes, with two sibling components rendered in a common layout.

ComponentA looks like this:

export const ComponentA = ({ dataFromServer }) => {
  useHydrateAtoms([[dataAtom, dataFromServer]], {
    dangerouslyForceHydrate: true
  });

  return null;
};

ComponentB looks like this:

export const ComponentB = () => {
  const data = useAtomValue(dataAtom);

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

The data is generated server side using a database query that accepts a search param, thus requiring the use of dangerouslyForceHydrate: true

The initial render works fine, but if I pass a new search param (which passes different data to ComponentA), I get the following error:

Warning: Did not expect server HTML to contain the text node "{"id":"2" ... }" in <div>
...
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
...
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
...
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

This also happens if instead of parallel-routes and siblings, I make ComponentB a child of ComponentA. Example:

<ComponentA dataFromServer={data}>
  <ComponentB /> // <--- Notice I am not prop drilling, but instead am using useAtomValue
</ComponentA />

Is this a bug or expected behavior that isn't documented (or perhaps I missed the documentation)?

[dai-shi]

This also happens if instead of parallel-routes and siblings, I make ComponentB a child of ComponentA.

Thanks for the simpler reproduction.
If you don't use dangerouslyForceHydrate, doesn't it show the hydration warning for the initial load?

[npearson72]

From what I observe, the behavior is the same with and without dangerouslyForceHydrate. So including it in the examples is a red hearing (my apologies).

Also, I should clarify what I meant by:

The initial render works fine

Unlike the case of using a single component, when I use two components the data in ComponentB is not present in the server side rendered payload, but does get injected client side. In other words, it appears on the screen but not in the network tab. This requires guarding the client like so:

{model ? JSON.stringify(model) : 'Loading...'}

However on that initial load, I do not see any errors in the console. So perhaps stating that things work "fine" on initial load is also misleading.

[dai-shi]

the behavior is the same with and without dangerouslyForceHydrate

Okay, then I think this is something not possible to work around on our end.

<ComponentA dataFromServer={data}>
  <ComponentB /> // <--- Notice I am not prop drilling, but instead am using useAtomValue
</ComponentA />

It means, ComponentB renders first and then ComponentA.
So, it's an expected behavior, and the workaround is <ComponentB dataFromServer={data} />.

[npearson72]

Thank you for clarifying.