1

I'm facing an issue with my Next.js project involving server-side rendering (SSR). In my application, I have a payment flow where the user is redirected to a bank page for payment. Upon returning to my page, I rely on an SSR function to retrieve and display some information.

Expected behavior:

The SSR function retrieves and displays the expected information on the destination page consistently across different browsers.

Actual behavior:

The SSR function works as expected in Mozilla, but doesn't work correctly in Chrome. When returning to the destination page in Chrome, the SSR function fails to retrieve and display the expected information. If reload the page in the destination page the expected data is present.

Get server side props
export async function getServerSideProps(context: any) {
  const { transactionId } = context.params;
  const { token } = context.req.cookies;

  return await GETSSR(bankTransaction(transactionId, ServiceType), token).then(
    (e) => {
      return { props: { result: e.result } };
    }
  );
}

Could anyone provide guidance on how to troubleshoot and fix this issue? I would greatly appreciate any insights or suggestions.

Fabio Nettis
  • 1,150
  • 6
  • 18
younes
  • 11
  • 4
  • 1
    The browser shouldn't play any role when using SSR. As the name states this function is only ever run on the server. Try running `rm -rf .next node_modules && yarn install && yarn dev`. – Fabio Nettis Jun 26 '23 at 09:40
  • @FabioNettis Thanks for your suggestion. i did that but still the problem exists. – younes Jun 26 '23 at 10:16

1 Answers1

0

I have made a slight modification to your code that could make a difference.

  1. I have used async/await since it makes your code much more readable
  2. I have imported the correct types since you are using typescript
  3. I have set the response cache header to no-store

Give this a shot, if the error persists I would start logging inside your GETSSR and bankTransaction functions for debug purposes, you will see generated logs inside the terminal window since this function exclusively runs on the server.

import type { GetServerSidePropsContext, GetServerSidePropsResult } from "next";

// Rest of your page

export async function getServerSideProps(
  ctx: GetServerSidePropsContext,
): Promise<GetServerSidePropsResult<Props>> {
  const { transactionId } = ctx.params;
  const { token } = ctx.req.cookies;

  // set the cache to no-store
  ctx.res.setHeader("Cache-Control", "no-store");

  const { result } = await GETSSR(
    bankTransaction(transactionId, ServiceType),
    token,
  );

  return { props: { result } };
}

Personal advise, change the name of the GETSSR and bankTransaction functions to something more verbose since they do not really explain all to well what they do.

Fabio Nettis
  • 1,150
  • 6
  • 18
  • Thank you very much for your advice and your answer. The issue was related to the attribute of setting the token, which is "secure: true". – younes Jun 27 '23 at 13:32