「Samples of performing fetch.」の同じcodeを持ったWeatherコンポーネントを二つ以上用意してリロードするとエラーが発生する。

[FuCrowRabbit]

「Samples of performing fetch.」の同じcodeを持ったWeatherコンポーネントを二つ以上用意してリロードするとエラーが発生する。

発生条件

README.mdにある「Samples of performing fetch.」のコードからPageコンポーネントだけを編集します。

以下のように同じcodeを持ったWeatherコンポーネントを二つ以上用意します。

const Page = () => {
  return (
    <SSRProvider>
      {/* Chiba  */}
      <Weather code={120000} />
      <Weather code={120000} /> {/* *******Add *******  */}
    </SSRProvider>
  );
};

その後、ブラウザ機能でリロードします。

結果

以下のようなエラーが出ます。

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <h1> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

環境

next 13.4.19
next-ssr 0.0.7

再現リポジトリ

https://github.com/FuCrowRabbit/next-ssr-issue1

[SoraKumo001]

@FuCrowRabbit
バグレポートありがとうございます。
同じkeyを持ったuseSSRが使用された場合、先行して実行されたfetchの結果を配るように修正しました。

[FuCrowRabbit]

@SoraKumo001
修正版を適用したところ、エラーが出なくなりました！
ありがとうございました。

https://github.com/FuCrowRabbit/next-ssr-issue1