Next.js: Safari back button from external page renders client side

Created on 27 Sep 2019  路  4Comments  路  Source: vercel/next.js

Bug report

Describe the bug

Safari loads from the client when the back button is pressed after visiting an href to an external site. This only happens when you run "next start", running in dev mode "next" it works as intended in safari.

To Reproduce

  1. Create an empty project directory. Create the following package.json file inside.

package.json

{
  "name": "nextsafarireprod",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "9.0.6",
    "react": "^16.9.0",
    "react-dom": "16.9.0"
  }
}
  1. run npm install
  2. Create a /pages directory inside the project directory
  3. Create index.js in the /pages directory with the following content
export default class About extends React.Component {
  static async getInitialProps({req}){
      if(req){
          console.log('initialProps: server');
          return {txt: 'server'}
      }
      else{
          console.log('initialProps: client');
          return {txt: 'client'}
      }
  }

  render(){
      console.log(this.props.txt, new Date().toISOString());
      return (
          <div>
              <p>
                  <a href="http://www.google.com">Go to Google!</a>
              </p>
              <p>{this.props.txt}</p>
          </div>
      )
  }
}
  1. Run npm run build; npm start for starting a local production server
  2. Go to localhost:3000 and open your browser's console
  3. Navigate to google by the link on the page (this is an old-school anchor tag)
  4. Hit the back button of the browser
  5. getInitialProps will fire and in the log you will see that a client request was made

Expected behavior

In dev mode, both safari and chrome behave as expected, the back button is a server side call (as evident in the console). But in prod mode, safari incorrectly makes a client side call and never calls the server, I would expect it to be a server side call as chrome and other browsers are, consistent with the way safari behaves in dev mode.

System information

  • OS: macOS, iOS
  • Browser: Safari 13.0.1 (13608.2.11.1.10)
  • Version of Next.js: 9.0.6

Additional context

Delete the .next folder, rebuild and restart the server and open a new private window from scratch every time you retry this, as both browser and the nextjs server tend to cache the pages. This bug is similar to https://github.com/zeit/next.js/issues/5648 which was solved for a while, as near as I can tell this is new and specific to safari 13 on both macOS and iOS

bug upstream

Most helpful comment

Confirmed this is still an issue in:

"next": "9.1.1",
"react": "^16.10.2",
"react-dom": "16.10.2"

All 4 comments

A possible solution is in my example file to replace return {txt: 'client'} with a location.reload(); but that just feels so dirty to have to do on my pages that I need a SSR on. It seems like this odd client side call from safari should be suppressed.

Confirmed that this does not happen in Safari 12.1.2 so this appears to be exclusive to the new versions of safari that are being distributed in the last bit, including iOS 13 which is being widely distributed. Its a fairly nasty bug and is going to cause a lot of grief.

Confirmed this is still an issue in:

"next": "9.1.1",
"react": "^16.10.2",
"react-dom": "16.10.2"

Hi @anthonywebb
I have the same issue with the back button, could I ask you if have you found a solution?
Thanks in advance!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

formula349 picture formula349  路  3Comments

YarivGilad picture YarivGilad  路  3Comments

olifante picture olifante  路  3Comments

sospedra picture sospedra  路  3Comments

pie6k picture pie6k  路  3Comments