Swipe back on mobile browser with getInitialProps flickers the previous page

[mikaa123]

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;

2. Run it, and access it with a mobile browser.
3. Click on the link, you are now on a page with "one", "two"...
4. Swipe back
5. 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

[minbelapps]

See my comments on #9833

[guigrpa]

This can be reproduced with desktop Safari as well.

[guigrpa]

Here's an extremely simple isolated example: https://github.com/guigrpa/bug-report-nextjs-flicker (no dependencies apart from React and Next, latest versions of both).

[lmhkkang]

Having the same issue here

Anyone knows exact reason why this happens??

it is because you swiped back the page before the page was rendered completely?

[newpouy]

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

[newpouy]

above example, even though i add seven, fast swiping back to index page from data page makes a very short flickering.

[TTiole]

Any ETA on when this will be worked on/fixed? Does anybody know of any temporary workarounds?

[dirkjf]

Any updates on this? I only have this issue on iPhones.