getInitialProps does not work correctly with back-button

I am using Passport.js and Express Sessions which make available a users field in the in context.req which is passed to getInitialProps for a Component.

As long as I am using the links in the page, everything works fine but as soon as I use the back-button, I am unable to access props, as if they did not exist.

Description

Reaching a page via the back-button causes props to become undefined which are defined when the page is reached via links or reloads.

Code

Here is my index.js In this code, the getInitialProps runs in the client-side when using back-button, which I confirmed with console.log. I do not think this should be running in client-side, and when it does, context.req is undefined.

import Link from "next/link";

class Index extends React.Component {
    static async getInitialProps(context) {
        return { user: context.req ? context.req.user : "Something is wrong" };
    }

    render() {
        return (
            <>
                <h1>
                    {this.props.user
                        ? this.props.user.name
                        : "There is nothing"}
                </h1>
...

Expected behavior

See GIF below to see the unexpected behavior I am experiencing. I expected the back-button-ed page to look the same as that page accessed directly via URL.

Screen-video

System information

• OS: Windows 10
• Browser: Firefox, Chrome (recent versions)
• Next.js: ^9.1.6

Additional Information

I will look over this https://github.com/zeit/next.js/issues/3065#issuecomment-466513840 tomorrow, but I do not think this should work as my problem unrelated to Links and their href and as.

I am just getting started in using Next.js so please help me find a link if a solution to it exists!

[minbelapps]

The issue is:

• Next.js server side doesn’t update it’s cached pages even though the same page is applied with different props from getInitialProps .
• When a browser’s back button is pressed 3 things happen:

1. The cashed and “compiled” page version is fetch from the next.js server. And that page is outdated. getInitialProps method was not called on server side.
2. The page component (in a browser) is applied with the cashed and outdated redux store and with the cashed and outdated props from getInitialProps .
3. The page component (in a browser) is applied with the real redux store and with the cashed and outdated props from getInitialProps .

This issue was on production mode and had different side effects (flickers, crashes, outdated screens). I think that all those tickets point to the same issue:

_https://github.com/zeit/next.js/issues/9833_ _https://github.com/zeit/next.js/issues/3065_ _https://github.com/zeit/next.js/issues/10465_

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.