Next.js在Safari（含iPhone端Chrome/Edge）前进后退时不执行服务端代码求助

一、先确认执行环境与语法兼容性 #

• 先搞清楚getInitialProps是在服务端还是客户端运行：在方法里加一行console.log(typeof window === 'undefined' ? '服务端执行' : '客户端执行')，通过Edge同步的日志判断。如果是客户端执行，说明页面是通过客户端导航触发的（比如next/link跳转出了问题），只有首次加载才会走服务端逻辑。
• 排查服务端代码里的Safari不兼容语法：比如用了?.、??这类ES2020+语法，Next.js 9的服务端编译可能没转译到位，导致Safari解析失败直接跳过执行。把这些语法换成兼容写法，比如a?.b改成a && a.b，a ?? b改成a || b（注意逻辑差异，按需调整）。

二、修复fetch的Safari兼容问题 #

• 明确设置请求头与响应校验：Safari对fetch的响应处理更严格，接口请求时要指定Accept头，并且先判断响应状态再解析数据：

  static async getInitialProps(ctx) {
    let data = null;
    try {
      const res = await fetch('你的接口地址', {
        headers: { 'Accept': 'application/json' }
      });
      if (res.ok) {
        data = await res.json();
      } else {
        console.error('接口返回异常:', res.status);
      }
    } catch (err) {
      console.error('请求失败:', err);
    }
    return { data };
  }
  

• 处理跨域Cookie：如果接口需要带Cookie，fetch里要加credentials: 'include'（同域场景用same-origin），同时确保服务端配置了正确的CORS头——Safari对跨域Cookie的限制比Chrome严格。

三、解决Safari日志不全的问题 #

• 调整Safari开发者工具设置：打开Safari偏好设置→高级，勾选“在菜单栏显示开发菜单”，然后在开发菜单里选中测试的页面，控制台里要勾选“所有级别”，别只留“错误”选项。
• 把关键日志换成console.error：Safari会过滤部分普通console.log，把执行节点的日志改成console.error，确保能在Safari控制台看到关键信息。

四、其他排查点 #

• 清空Safari缓存：旧缓存可能导致页面逻辑异常，清完缓存再重新加载测试。
• 换用getServerSideProps：Next.js 9已经支持getServerSideProps，这个方法是强制服务端执行，完全避开客户端执行的兼容问题，把getInitialProps的逻辑迁移过去试试。

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