getInitialProps does not work correctly with back-button

[utsavm9]

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 #3065 (comment) 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!

[Timer]

We need a full demo before we can take a look at this.

[rardoz]

It happens for me using the latest version of safari. I have links that navigate to a new page. When I click back the app crashes because there is no request object.

[atirudom]

It would be more precise to debug if we could see how the user data is passed to your getInitialProps.

My initial believe is that this would be caused by how you implement those login session causing them to not send the data (such as not implementing login session storage, etc). Since I could not see how the login session is stored and how the login session is sent, that would be the closest thought. Showing further demo or full demo would be best anyway.

[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:

#9833
#3065
#10465

[Timer]

Closing as no reproduction provided.

[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.