如何在Next.js中递归刷新页面并最终显示错误页？

问题原因 #

你当前的递归刷新逻辑存在三个核心问题：

1. window.location.reload()的异步特性：该方法触发页面刷新后，当前页面的JavaScript代码会继续同步执行完剩余逻辑（包括count--和下一次递归调用），直到递归走到终止条件输出blue，页面才会真正刷新。
2. 状态无法跨刷新保留：页面刷新后，原有的count变量会被重置，函数会再次从头执行，导致无限循环。
3. Next.js环境的影响：虽然用typeof window !== 'undefined'做了客户端判断，但服务端渲染时函数不会执行客户端逻辑，而客户端执行时的递归逻辑本身就不符合预期。

正确实现方式 #

由于页面刷新会销毁当前上下文，递归无法保留刷新次数的状态，必须用**本地存储（sessionStorage）**来跨刷新记录计数。以下是符合需求的代码：

export const handleRefreshOrRedirect = () => {
  // 从sessionStorage读取当前刷新次数，默认0
  let refreshCount = parseInt(sessionStorage.getItem('refreshCount')) || 0;

  if (refreshCount >= 2) {
    // 达到2次刷新上限，跳转错误页
    sessionStorage.removeItem('refreshCount'); // 清除计数，避免后续干扰
    window.location.href = '/error-page';
    return;
  }

  // 更新刷新计数并存储
  refreshCount++;
  sessionStorage.setItem('refreshCount', refreshCount.toString());

  console.log('refreshing', refreshCount);
  // 强制刷新页面
  window.location.reload(true);
};

逻辑说明 #

1. 每次页面加载时调用这个函数，首先从sessionStorage读取已有的刷新次数。
2. 如果计数已经达到2次，直接清除计数并跳转到错误页面。
3. 如果计数未达标，就把计数加1并存储，然后触发页面刷新。
4. 页面刷新后，新的上下文会读取到更新后的计数，以此实现“尝试刷新两次”的需求。

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