const returns Undefined when using the getServerSideProps method of Next.js

Question

Hello, I am using React with Next.js and using the native Next.js method, getServerSideProps to retrieve browser cookies.

It turns out that the breakdown works for the first const, but not for the last.

export const getServerSideProps: GetServerSideProps = async(ctx) => {
  const { level, currentExperience, challengesCompleted, user, userName, accumulatedExperience} = ctx.req.cookies;
  
  return {
    props: {
      level: Number(level ?? 1),
      currentExperience: Number(currentExperience ?? 0),
      challengesCompleted: Number(challengesCompleted ?? 0),      
      user: user || null,
      userName: userName || null,
      accumulatedExperience: Number(accumulatedExperience ?? 0)
    }
    
  };
}

In the case, level, currentExperience and challengesCompleted are returning me correctly 0. user and username, rightfully null

But accumulatedExperience turning back undefined and this makes the mathematical operations are not performed, because returns me Nan.

Does anyone know what it can be ?

Answer 1

I personally would not use getServerSideProps for that purpose. See, this function is intended to make the Server Side Rendering (SSR), that is, when you need to process something on the server before rendering the page (e.g., take data from the database). You can use other React strategies to load this information when the component is mounted. An output would be to use Hook useEffect

import {useEffect} from 'react'

const MeuApp = () =>{
  useEffect(()=>{
    //AQUI VC CAPTURA OS COCKIES
    },[]})
}

useEffect runs every time the component is mounted and together with useState, you can store the data to be used in the rest of the code.