Next.js: Using getServerSideProps breaks scroll restoration

[claus]

Bug report

Describe the bug

When using getServerSideProps, a server roundtrip is made every time the user navigates to a page, to load the page's data json (generated by getServerSideProps).

This _also_ happens when the page is navigated to _via the browser's back and forward buttons_. The latency of the request, even when cached, breaks browser-native scroll restoration.

As there is no way to intervene with the request on the client side (using getServerSideProps, the request is made Next-internally), it can't be blocked. Using getInitialProps, it was possible to cache data on the client side and return it immediately. This is not possible anymore with getServerSideProps.

To Reproduce

The issue is sufficiently documented here.

Expected behavior

Pages using getServerSideProps do not break scroll restoration when navigated to via the browser's back/forward buttons.

[tyler-ground]

This is a big problem, basically breaks every website running nextjs. Is there no general solution for this?

[claus]

Here's a band-aid fix for that problem:
https://gist.github.com/claus/992a5596d6532ac91b24abe24e10ae81

[Timer]

Reverted this while we figure out a forward nav bug. Will be relanded soon!

[Livven]

Wouldn't the "proper" fix be to cache getServerSideProps responses and use them for back/forward navigation? This would not only fix the scroll restoration issue, but also make back/forward navigation work without additional requests, which matches native browser (and also getStaticProps) behavior.

[tyler-ground]

It would be nice to make it configurable:

1. Use cached data
2. Hold for backend refresh