Nextjs getServerSideProps not passing updated props

Question

I've the challenge that in a nextjs page the getServerSideProps is not passing the updated props.

My page structure is as follows

|-pages
 |-notifications
  |-emails
   |-index.tsx
   |-activate.tsx

In the page pages/notifications/emails/index.tsx the getServerSideProps fecthes all emails related to a user from an API and populates the props for the page as follows:

type Props = {
  emails: Array<RecordEmail>;
  error?: string;
};

const Notifications = ({ emails: initialEmails, error }: Props) => {
  const [emails, setEmails] = useState<Array<RecordEmail>>(initialEmails);
  return (
   <div className="mt-4 flex flex-col space-y-2">
          <pre className="bg-gray-100 p-2 font-gtpressuratibold text-xs">
            <code>{JSON.stringify(emails, undefined, 2)}</code>
          </pre>
          <pre className="bg-gray-100 p-2 font-gtpressuratibold text-xs">
            <code>{JSON.stringify(initialEmails, undefined, 2)}</code>
          </pre>
        </div>
  )
}

export const getServerSideProps: GetServerSideProps<Props> = async (
  context
) => {
  context.res.setHeader(
    "Cache-Control",
    "private, s-maxage=1, stale-while-revalidate=1"
  );
  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  );

  try {
    const result = await FETCHDATA(with session token)
    
    const emails: Array<RecordEmail> = [];

    result.items.forEach((a) => {
      if (typeof a["email"] !== "undefined") {
        const r: RecordEmail = {
          id: a.id,
          email: a["email"],
          primary: a["primary"],
          valid: a["valid"],
        };
        emails.push(r);
      }
    });
    console.log("Emails getServerSideProps - emails: ", emails);
    return {
      props: {
        emails: [...emails],
      },
    };
  } catch (err: any) {
    console.error(err);
    return {
      props: {
        emails: [],
        error: (err as Error).message,
      },
    };
  }
};

export default Notifications;

On the page pages/notifications/emails/activate.tsx the user enters an activation code to activate the email. After submitting the code the email is activated. This works as seen in the DB and the API. By clicking a <Link> the user navigates to the page pages/notifications/emails/index.tsx to see all emails.

By navigating to the page pages/notifications/emails/index.tsx the getServerSideProps requests the new data correctly. The console.log("Emails getServerSideProps - emails: ", emails); logs the updated data. But the page shows still the old data (the data before submitting the activation code).

Does anyone know why the updates props are not correctly passed to the page?

Additional question: On the page pages/notifications/emails/activate.tsx I'm not using getServerSideProps . But, by navigating this page (either via <Link> or complete new refresh) the getServerSideProps from the page pages/notifications/emails/index.tsx is called. Is this by design?

Thanks for your help!

Update: After refreshing the page completely or navigating by <Link> to another page and then back passes the data correctly.

Answer 1

Problem

When your initialEmails change your state won't change

const [emails, setEmails] = useState<Array<RecordEmail>>(initialEmails);

Solution

Remove the state. Props shouldn't be stored inside a state.