【React】Suspenseとfetchを使ったときのエラー

プログラミング

2023.11.222024.09.30

起こった問題
なぜ起こるのか
解決方法
まとめ
参考

起こった問題

React18にあるローディングを簡単にする機能､Suspenseにおいて､よくわからない事象が起きた｡
簡潔に言うと､SSRとCSRで生成されたDOM情報が異なるというエラーだ｡

Error: Text content does not match server-rendered HTML

Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.

なぜ起こるのか

fetchなど､APIを用いてデータを取得している画面でデータを更新､リロードを行うと､SSRはキャッシュがあるためか､はたまたバグか､データ更新前の情報を保持している｡
その後､CSRはAPIで最新のデータを取得しレンダリングする｡
その結果､更新前と更新後で情報が異なるため､レンダリングされた情報が異なるとエラーになる｡

解決方法

remix-utilsモジュールを利用しました｡
この中にある､ClientOnlyを用いると､レンダリングをクライアントだけにできます｡
使い方はシンプルで､SuspenseのかわりにClientOnlyタグに変更し､子要素を{}でreturnするように修正します｡

$ npm i remix-utils

import { ClientOnly } from "remix-utils/client-only";

{中略}
    // Suspense → ClientOnly    
    // <Suspense fallback={<Loading />}>{child}</Suspense>
    <ClientOnly fallback={<Loading />}>{() => <>{child}</>}</ClientOnly>