next.js SSR函数在Mozilla中工作,但在Chrome中不工作

y53ybaqx  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(124)

我的Next.js项目遇到了一个涉及服务器端渲染(SSR)的问题。在我的应用程序中,我有一个支付流,用户被重定向到银行页面进行支付。在返回到我的页面时,我依靠SSR函数来检索和显示一些信息。

预期行为:

SSR函数在不同的浏览器中检索并在目标页面上一致地显示预期的信息。

实际行为:

SSR函数在Mozilla中按预期工作,但在Chrome中无法正常工作。在Chrome中返回目标页面时,SSR函数无法检索和显示预期信息。如果在目标页中重新加载该页,则会显示预期的数据。

获取服务端 prop
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 } };
    }
  );
}

有谁能提供有关如何排除故障和解决此问题的指导吗?我将非常感谢任何见解或建议。

7y4bm7vi

7y4bm7vi1#

我对你的代码做了一点小小的修改,可能会有所不同。
1.我使用async/await,因为它使你的代码更易读
1.我已经导入了正确的类型,因为你正在使用typescript
1.我已经将响应缓存头设置为no-store
给予一下,如果错误仍然存在,我将开始在GETSSRbankTransaction函数中记录日志以进行调试,您将在终端窗口中看到生成的日志,因为此函数仅在服务器上运行。

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 } };
}

个人建议,将GETSSRbankTransaction函数的名称更改为更详细的名称,因为它们并没有真正解释它们所做的一切。

相关问题