getServerSideProps returns undefined on client side transition after adding locales

[abdofola]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.2.0
      eslint-config-next: 12.2.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/abdofola/Abdallah-Money-Tracker

To Reproduce

clone the repo in the link above, follow the instructions in the readme.md to get started.

Describe the Bug

After successfully running the project locally, try to navigate from home to statement page you will have and error in the browser console:

 Uncaught TypeError: Cannot read properties of undefined (reading 'id')

the id comes from getServersideProps, which has the following code:

import { withSessionSsr } from "@lib/session";

export const getServerSideProps = withSessionSsr(({ req }) => {
  const { user } = req.session;

// user has this structure {id, email, name, createdAt, updatedAt}
  console.log("-----getServerSideProps---->", { session: user });
  if (!user) return { redirect: { permanent: false, destination: "/login" } };
  return { props: { session: user } };
});

// page component
const AccountStatement: NextPageWithLayout = ({ session }) => {
// dome some client fetching based on the id
  const { data, isSuccess, isLoading, error } = useGetTransactionsQuery({
    userId: session.id, // session is `undefined`, the hook fails to fetch and raises an error
  });

// return some jsx
...
}

export default AccountStatement;

the weird thing though, when deploying to vercel the error happens the other way around, i.e when navigating from statement to home page and not vice versa

Expected Behavior

expect getServerSideProps to run on client side transition, therefore session should not be undefined

Which browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

vercel

[ekkusi]

Did you manage to solve this issue? I'm facing something similar: When navigating with next/link, sometimes the props from getServerSideProps get passed to the page, sometimes not. Weirdly only happens when deploying to Vercel or custom Docker image. Running a prod build locally runs without problems.

[diidiiman]

After hours of searching, this issue seems related. getServerSideProps sometimes fire, sometimes not. In my case the target page is dynamic one and relies on getServerSideProps to fetch locales. In dev mode no issues, of course.

[aviggiano]

Did you manage to solve this issue? I'm facing something similar: When navigating with next/link, sometimes the props from getServerSideProps get passed to the page, sometimes not. Weirdly only happens when deploying to Vercel or custom Docker image. Running a prod build locally runs without problems.

I'm having the same issue. Deployed on AWS Amplify. Works perfectly locally.

[diidiiman]

From what I understood and how I solved the issue I was facing.

My issue was due to next-i18next useTranslations function in the getServerSideProps.
From what I understood is that NextJS attempts to pre-fetch all pages it can see linked on the currently navigated page.
For this first attempt, it will call getServersideProps but it will not repeatedly call getServersideProps for the same page and in my case that broke down translations since they were dependent on this function being invoked.

Proper solution to translation issue is quite obvious. Since that is a dynamic page, all of the content should be fetched in useEffect, thus there is no need for getServerSideProps and it was left there only for translation functionality. So if we use next-i18next with client side translations for such pages, it works as expected.

https://github.com/i18next/i18next-http-backend/tree/master/example/next