追記：NextJS(AppRouter)でSuspenseを使うときはCSRにしようと書いたのだが、CSRだとNextJSのRouter Cacheと相性がわるそう。というか、最近NextJSはオーバースペックだなぁと感じている。
Viteで作っていたReactのプロトをNextjsに移植したところ、Suspense周りでトラブルが起きた。ReactQueryもSWRでもどちらでも同じ症状が起きた。
エラーメッセージを見る限り、原因はあきらかにSSRだと予測できたため、SSRを無効にして、CSRにすれば解決するだろうと思われた。ただ、思ったより苦戦した。
調べるとまず見つかるのは以下のおまじない。これをコードの1行目に記載する。
'use client'
これでエラーは起きるが一応表示はされるようにはなった。 完全にCSRになるのかと思ったが、そうではなく、SSRされることもある様子。
次にSSRを無効にする方法について調べると、以下のおまじないが見つかった。
export default dynamic(async () => MyApp, {ssr: false} );
これを適用したら、Suspenseがエラーなく期待通り動作するようになった。
追記1
SSRでは、fallbackDataを設定すればSuspenseのコード自体は動作したのだが、ローディング中にはfallbackDataが返ってくるようになってしまい、期待した動作にならなかった。SSRの制約として受け入れるしかないのかもしれないが、よくわからない。
追記2
fallbackDataを設定すれば、と書いたのだが、これは勘違いでご作法(loading.tsxなど)に沿って書けば、AppRouterのSSRでもSuspenseはfallbackDataの設定なしでも動作した。
