Link component does not persist scroll position

[migueloller]

When using Link for routing and then pressing the browser's back button, the page will not remember the previous scroll position.

For example, go from page1 to page2 and then click the back button. page1 is rendered at the top of the viewport.

The browser is keeping track of the scroll position because if the page is refreshed it will refresh at the appropriate position. Is this an issue with the History API?

[rauchg]

It might have to do with the latency of getting the data? I've been wanting to experiment with passing popStateEvent (the event from the popstate event) to getInitialProps as a way of letting the user optionally load the data from a cache that they maintain

[migueloller]

Hmm, do you mean when using prefetch? I tried both with and without prefetch and the issue was still there.

I'm not sure how data latency might affect the scroll position of the viewport when going back a page. Do you mind explaining?

[rauchg]

I was assuming that the browser has a heuristic for how long to wait for a scroll height to become available to scroll to.

[rauchg]

Because, keep in mind that the popstate event is optimistic. We can't block the location from changing, it changes immediately (this is different from how push is handled).

Therefore, you press back, we start fetching data, that might take N milliseconds. I was assuming that browsers give up on preserving scroll if that N is sufficiently large.

[migueloller]

Ah, I see. That sounds reasonable. What is the difference between clicking the back button or refreshing the page, though? Does clicking the back trigger the History API and you listen for that in order to fetch the page's data?

When the location changes immediately does it do another render server side, or is it all taken care of in the client? If it's done in the client then perhaps the browser might try to scroll before React mounts the component tree (when the viewport has no height). Which would make sense then that when you do a full refresh it works (the full refresh goes to the server and comes back with the entire markup).

[migueloller]

I just took a look at what was going on behind the scenes and it does look that there are no network requests (other than static assets) when going back a page. This definitely sounds like it would make everything go much faster but it comes at the cost of losing the scroll position. Is there any way to avoid this?

[rauchg]

At the time we always fetch data fresh. I'm thinking that if we expose said event to getInitialProps, we can write a decorator for fast back:

export default withPopstateCache(class extends React.Component {
  static async getInitialProps () {
    cont res = await fetch('api.com/this/will/be/cached/when/you/press/back')
    return res.json()
  }
})

but anyway, my rant could just be unrelated to the scroll position bug :P

[migueloller]

Haha, I think that might work. Maybe also a way to simply skip the History API? So perhaps a way to not listen for the browser's back button and allow to set this as an option?

[stacygohyunsi]

Does anyone know why is it that when I added in this code the scroll position retains when I go from page1 to page2 and then click the back button:

componentDidMount () {
console.log(document.body.scrollTop);
}

[vinaypuppal]

@stacygohyunsi You can use scroll prop on link component for your use case like this <Link href="/path" scroll />
Ref: https://github.com/zeit/next.js/blob/master/lib/link.js#L55-L69

[coluccini]

@vinaypuppal is there a way to achieve this while using router.push?

[vinaypuppal]

@coluccini Yes

Router.push('/path').then(() => window.scrollTo(0, 0))

[coluccini]

Oh, I didn't know that router return a promise :) Thanks!

[arunoda]

Currently this is not implemented with Link. But if someone could send a PR I'd happy to take it.
For now, your Router.push() with your own logic.

May be someone could create a package like: next-scroll-link or something.