Next.js通过Link跳转后用浏览器前进按钮导致Tab冻结、页面无限重加载

根本原因 #

你遇到的问题是Next.js 13 App Router中客户端异步组件（带async关键字的客户端组件）在历史导航（前进/后退）时的兼容性冲突：

• 通过Link组件跳转属于客户端路由，进入仪表盘后浏览器历史栈会记录该页面状态；
• 返回首页再点击前进时，客户端尝试恢复仪表盘页面的hydration状态，但异步组件的async/await执行逻辑会和React的hydration机制冲突，导致组件被反复触发渲染，进而形成无限循环；
• 手动输入URL属于服务端渲染（SSR），直接生成完整页面发送到客户端，不会触发客户端hydration的冲突逻辑，因此无问题。

解决办法 #

方案1：将异步逻辑移到useEffect中（推荐，适用于需要客户端交互的页面） #

保持组件为同步函数，把异步操作放在useEffect里，通过状态管理控制渲染流程：

'use client';
import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [dashboardData, setDashboardData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      // 这里写入你的异步逻辑，比如API请求、异步方法调用
      const response = await fetch('/api/get-dashboard-data');
      const data = await response.json();
      
      setDashboardData(data);
      setIsLoading(false);
    };

    loadData();
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>仪表盘</h1>
      <p>数据：{JSON.stringify(dashboardData)}</p>
    </div>
  );
}

方案2：使用Server Component（适用于无客户端交互需求的页面） #

如果仪表盘页面不需要客户端交互逻辑，直接用默认的Server Component（App Router下无需添加'use client'），异步数据请求可直接写在组件内：

// app/dashboard/page.js
export default async function Dashboard() {
  // 直接在服务端执行异步请求
  const response = await fetch('https://your-api-url.com/data', {
    cache: 'force-cache' // 根据业务需求设置缓存策略，避免重复请求
  });
  const dashboardData = await response.json();

  return (
    <div>
      <h1>仪表盘</h1>
      <p>数据：{JSON.stringify(dashboardData)}</p>
    </div>
  );
}

这种方式下数据在服务端获取后直接渲染为HTML，客户端导航时不会触发重复异步请求，自然不会出现无限重渲染。

方案3：检查导航栏Link组件 #

确保导航栏的Link组件导入正确且无额外错误逻辑：

// 导航栏组件示例
import Link from 'next/link';

export default function Navbar() {
  return (
    <header>
      <Link href="/">首页</Link>
      <Link href="/dashboard">仪表盘</Link>
    </header>
  );
}

避免在Link上添加自定义onClick事件触发导航，这会导致重复路由跳转请求，加重问题。

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