nextjs: 13.x
[2404追記]
公式ドキュメントで文書化済み nextjs.org
概要
既存のpages構成で稼働しているnextjsサーバーで、app routerを有効にして一部ページをappディレクトリに移行しました。
すると、pagesにある特定のリンクへのページ遷移/router.push()時に、SPAにも関わらず確定で強制リロード/page refresh/hard navigationのような挙動が発生しました。
頑張ってデバッグするとどうやら、app router機能のリリース辺りで以下のような修正が入っていたことに起因するようでした。
This adds a new client router filter for app paths and redirects so that we correctly hard navigate when a transition for one of this paths is encountered.
~~
The specific filter leveraged here is a bloom filter as we can tolerate some false matches (currently targeting an error rate of 2%) as they just trigger a hard navigation which should be acceptable and this also avoids needing to send an entire manifest with the related paths.
https://github.com/vercel/next.js/pull/46283
https://github.com/vercel/next.js/pull/49741
SPAにおいてもページ遷移時に、一定確率で静的もしくは動的なページであるとクライアント側で誤認定されて、ページリロードされるような挙動になるよう。。
対策
当該アプリケーションでは、ページ遷移時にstateが失われると壊れる設計になっており直ぐに対処する必要があったので、
next.config.tsでclientRouterFilter=falseにすることで一旦の暫定対応としました。
const nextConfig = { experimental: { clientRouterFilter: false, // clientRouterFilterがページ遷移時に、hard navigationするかチェックしているみたい ~~省略~~
falseにすることのデメリットを完全に把握したわけではないので、よく動作確認すること推奨です。
また、issueも上がっていたので、恒久的な対応としてはnextjs側の対応を待つしかなさそうです。
