Swipe back on mobile browser with getInitialProps flickers the previous page

Bug report

Describe the bug

On mobile browsers (tested with Chrome and Firefox), swiping back or forward on a dynamic page (one that gets data from getInitialProps) will sometimes “flash” the previous page while the content is loading. Here is a video that shows the problem.

To Reproduce

1. Create a next.js app with the following pages:

index.js

import Link from "next/link";

export default function Index() {
  return (
    <div>
      <p><Link href="data"><a>Link</a></Link></p>
    </div>
  );
}

data.js

const Index = props => {
  return (
    <div>
      <h1>Test mobile back</h1>
      <ul>
        {props.data.map(name => (
          <li key={name}>
              <a>{name}</a>
          </li>
        ))}
      </ul>
    </div>
  )
};

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

Index.getInitialProps = async function() {
  await sleep(1000)

  return {
    data: ["one", "two", "three", "four", "five", "six"]
  };
};

export default Index;

1. Run it, and access it with a mobile browser.
2. Click on the link, you are now on a page with “one”, “two”…
3. Swipe back
4. Now swipe forward. Notice the “flash” of the previous screen.

Now, add "seven" to the data returned in data.js, and notice the problem doesn’t happen anymore

Expected behavior

No flash of the previous page when swiping forward or backward on mobile browser. This is what happens now vs this is what should happen

System information

• OS: MacOS
• Browser (if applies): Mobile Safari, chrome and firefox
• Version of Next.js: 9.2.1

[TTiole]

@dirkjf personally, the approach I went for was invalidating the snapshot of the page that webkit generates. This line contains the conditions under which the snapshot will be generated when you swipe backwards/forwards to navigate. So I created a hacky hook that I placed in _app in order to invalidate the snapshot as much as I could.

const useSnapshotInvalidation = (router: Router):void => {
    // Disable scroll retention for ios
    React.useEffect(() => {
        if (IOS() && history && history.scrollRestoration && history.scrollRestoration === 'auto') {
            history.scrollRestoration = 'manual';
        }
    }, [IOS() && history && history.scrollRestoration && history.scrollRestoration === 'auto']);
    
    const alternator = React.useRef<number>(0);
    // Scroll slightly and alternate between pages to always invalidate image snapshot.
    // See https://git.vtsmedia.com/vtsfans/web-frontend/-/issues/318 for explanation on this effect and the previous
    React.useEffect(() => {
        const slightScroll = (url: string) => {
            if (IOS() && excepmptPages.every(page => !url.includes(page))) {
                window.scrollTo({ left: 0, top: alternator.current });
                alternator.current = Number(!alternator.current);
            }
        };
    
        router.events.on('routeChangeComplete', slightScroll);
    
        return () => router.events.off('routeChangeComplete', slightScroll);
    }, []);
};

[newpouy]

same issue. it looks like having relation with user’s swiping speed sometimes, but it’s not sure.