Next.js中SSR函数火狐正常但Chrome失效问题排查求助

核心原因推测 #

Chrome从银行页面返回时，大概率触发了前进/后退缓存（BFCache）：这种缓存机制会直接复用之前页面的快照，不会重新执行服务端的getServerSideProps逻辑；而Firefox的BFCache触发条件或行为不同，因此能正常触发SSR。另外也可能存在Chrome中Cookie未正确传递的情况，导致服务端拿不到token或交易状态数据。

排查步骤 #

• 验证BFCache触发：在Chrome开发者工具的Application标签 → Cache → Back/Forward Cache查看页面是否被缓存；或者在页面中添加pageshow事件监听，打印event.persisted，值为true则说明命中BFCache。
• 检查Cookie一致性：在getServerSideProps中打印context.req.cookies，对比Chrome返回时和刷新后的Cookie内容，确认token等关键Cookie是否缺失。
• 查看服务端日志：检查GETSSR请求在Chrome返回时是否被触发，返回的e.result是否为空或存在错误。

修复方案 #

方案1：禁用当前页面的BFCache #

客户端监听处理

在页面组件中添加监听，命中BFCache时强制刷新：

import { useEffect } from 'react';

export default function PaymentResultPage() {
  useEffect(() => {
    const handlePageShow = (event) => {
      if (event.persisted) {
        window.location.reload();
      }
    };

    window.addEventListener('pageshow', handlePageShow);
    return () => window.removeEventListener('pageshow', handlePageShow);
  }, []);

  // 页面渲染逻辑
}

服务端设置响应头

在getServerSideProps中添加响应头，禁止浏览器缓存页面：

export async function getServerSideProps(context: any) {
  // 禁用BFCache及页面缓存
  context.res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
  context.res.setHeader('Expires', '0');
  context.res.setHeader('Surrogate-Control', 'no-store');

  const { transactionId } = context.params;
  const { token } = context.req.cookies;

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

方案2：确保Cookie正确传递 #

如果是Cookie缺失问题：

• 检查银行回调时设置的Cookie属性，确保SameSite设为Lax或None（跨域场景），同时HTTPS环境下添加Secure属性。
• 在getServerSideProps中增加Cookie缺失的处理逻辑，比如返回提示引导用户刷新：

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

  if (!token) {
    return { props: { result: null, needRefresh: true } };
  }

  try {
    const result = await GETSSR(bankTransaction(transactionId, ServiceType), token);
    return { props: { result: result.result, needRefresh: false } };
  } catch (err) {
    console.error('SSR请求失败:', err);
    return { props: { result: null, needRefresh: true } };
  }
}

方案3：客户端兜底请求 #

当SSR返回数据为空时，客户端主动发起请求补充数据：

import { useEffect, useState } from 'react';

export default function PaymentResultPage({ result: ssrResult, transactionId }) {
  const [finalResult, setFinalResult] = useState(ssrResult);

  useEffect(() => {
    if (!finalResult) {
      fetch(`/api/transaction/${transactionId}`, { credentials: 'include' })
        .then(res => res.json())
        .then(data => setFinalResult(data.result))
        .catch(err => console.error('客户端请求失败:', err));
    }
  }, [finalResult, transactionId]);

  return (
    <div>
      {finalResult ? finalResult.content : (
        <div>加载中...若长时间无响应请刷新页面</div>
      )}
    </div>
  );
}

额外优化建议 #

• 避免await与.then()混合写法，改用清晰的异步逻辑，便于排查错误。
• 在getServerSideProps中添加错误捕获，打印详细错误信息，定位问题更高效。

内容的提问来源于stack exchange，提问作者younes