Importance of the browser back experience

Browser back is one of the most important web browsing experiences for users.

• 7 Principles of Rich Web Applications
  • Translation: リッチなWebアプリケーションのための7つの原則
  • Written by Mr. Rauch.
• Don’t break history, enhance it
  • Back should be quick; users don't expect data to have changed much.
  • Scroll position and UI state would be better restored by browser back / forward.

Importance of the browser back experience

However, most applications don’t care about browser back / forward restoration.

• Scroll position and UI state is missed on some sites.
  • e.g. Accordion, tab ui, etc.
• Some users complained about these situations.
  • https://rentwi.hyuki.net/?1576010373357965312

Important features in the browser back experience

IMO, Next.js would be better to implement the below features for the browser back experience.

• Restoration of scroll position
• Restoration of UI state
  • UI state sync when next.js router is changed
    • It would be better next/router is easy to integrate with a global state management system such as Redux, Recoil, etc.

Restoration of scroll position

Scroll restoration has been implemented already behind the experimental flag.

// next.config.js
const nextConfig = {
  // ...
  experimental: {
    scrollRestoration: true,
  },
}

module.exports = nextConfig
// next.config.js
const nextConfig = {
  // ...
  experimental: {
    scrollRestoration: true,
  },
}

module.exports = nextConfig

Restoration of scroll position

fix: Scroll restoration bug caused by idx reset to 0 on reload.

https://github.com/vercel/next.js/pull/36861

Restoration of scroll position

詳細な解説はzennにまとめてあるので、そちらをご参照ください。

https://zenn.dev/akfm/articles/next-js-scroll-restore

Restoration of UI state

Unfortunately, we cannot sync our UI state with next/router changed using public API.

• Next.js encapsulates history.state.
• In next/router, the history key is included in history.state but it is not opened.
  • Depends on internal implementation, but history state can be realized by referring to this.

Restoration of UI state

We have created a new library, recoil-sync-next!(and I helped a little with that.)
This lib could be better to improve the browser back experience.

export const counter = atom<number>({
  key: 'counterState',
  default: 0,
  effects: [
    syncEffect({
      storeKey: 'ui-state',
      refine: number(),
    }),
  ],
})
export const counter = atom<number>({
  key: 'counterState',
  default: 0,
  effects: [
    syncEffect({
      storeKey: 'ui-state',
      refine: number(),
    }),
  ],
})

Restoration of UI state

これも、詳細な解説はzennにまとめてあるのでそちらをご参照ください。

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

What we would like to from the browser back experience for Next.js

First of all, thanks for having scrollRestoration.

• It would be nice!
  • if the beta feature app directory could also support scrollRestoration.
  • next/router would expose the key as with the Navigation API.
  • History state management (useNextState?) implemented.