Scroll restoration happens too early before the page gets rendered after hitting browser back button

• I have searched the issues of this repository and believe that this is not a duplicate.

After transiting from one page to another page via next <Link />, if user clicks the back button and the previous page has getInitialProps method that takes some time to finish, the scroll position of the previous will be restored before the previous pages gets rendered.

Demo

source code can be found here

After clicking back button, the “go back” text should still be visible (not scroll down to previous position) until the previous page gets rendered

[arunoda]

We’ve a similar issues reported here: https://spectrum.chat/thread/3d65b436-b085-4eef-ad84-0941c473e09d

Next.js doesn’t hijack scrolling. But this is a real issue. Here’s what’s happening. This is because of browser’s default scrolling behavior. See: https://github.com/zeit/next.js/issues/3303#issuecomment-354225323

When you go back, browser tries to go to the previous scroll position for better UX. But in the ^^ case, the data is not loaded yet. But the data will be there in a bit with the latency of getInitialProps(). When the data rendered, it’s not the correct position as before.

So, in order fix this you can do a few things:

• Cache the data locally and render the page from that cache. You can even update the data in behind the scene. In this case data will be there as the user hit the back button.
• Control scrolling manually via Router.push(). (This will return a promise and it’ll get resolved when the page is rendered)

We’ve no plan to manage scrolling inside Next.js yet. But you can do it in the userland and publish a new Link component like LinkBetterScrolling.

[hardwit]

My solution for restoring scroll position when the browser back button clicked:

_app.js

componentDidMount() {
    const cachedPageHeight = []
    const html = document.querySelector('html')

    Router.events.on('routeChangeStart', () => {
      cachedPageHeight.push(document.documentElement.offsetHeight)
    })

    Router.events.on('routeChangeComplete', () => {
      html.style.height = 'initial'
    })

    Router.beforePopState(() => {
      html.style.height = `${cachedPageHeight.pop()}px`

      return true
    })
}