https://zenn.dev/akfm/articles/recoi-sync-next

以前、Next.jsのスクロール位置復元について記事を書きました。

上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。

• MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存)
• SPAではこれらが軽視されがち
• Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される)
• Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する

これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。

ブラウザバック/フォワード時のUI復元についてはSPAに限った話ではなく、JavaScriptで実現してるUIパーツ全般においてあまり対応されていないようにも感じます。代表的なのが上記ツイートの冒頭で言われている無限スクロールやアコーディオンの開閉状態などです。

会社の先輩が自身を指して「戻る厨」と表現していたのを拝借し、本稿のタイトルではブラウザバック/フォワード時にUI復元を求める人を「戻る厨」と記載していますが、ブラウザバック/フォワード時のUI復元は多くのWebユーザーが求める一般的な要件だと筆者は考えています。本稿はSPAとMPAにおけるこの問題の解説と、Next.jsにおけるUI復元問題を解決するrecoil-sync-nextを紹介する記事です。

ブラウザバック時のUI状態の復元

MPAにおけるUI状態の復元

まずはブラウザバック/フォワード時のUI復元のあり方について考えてみましょう。whatwgではブラウザバック/フォワード時のUI復元についてどのような仕様が定義されているのでしょう？

Optionally, update other aspects of entry's document and its rendering, for instance values of form fields, that the user agent had previously recorded in entry's persisted user state.

履歴の実態であるhistory entry内に保存される、persisted user stateにユーザーエージェント(ここではブラウザ)が復元したいstateを格納することができるようです。ここでは例として、Form valueが挙げられています。つまり、UI復元についても以前の記事で挙げたscroll position data同様に、ユーザーエージェントによって復元できる≒ユーザーエージェント側が何をどこまで復元するか決めることができるようです。

実際にChromeとSafariで試してみました。以下はローカルサーバーからCache-Control: no-storeヘッダー付きで静的ファイルを返却し、テスト内容を実施後にブラウザバックで遷移した時の結果です。

UI状態で何を復元するかはユーザーエージェントによって決められるので、ChromeではForm value以外は復元せず、一方SafariではアコーディオンなどのUI状態も含め復元するようです。