移动端Chrome中useEffect数据请求失效问题排查求助

以下是几个直接可用的技术方案，按优先级排序：

• 禁用Link预取：Next.js的<Link>默认会预取视口内的页面资源，移动端的预取缓存可能导致快速切换时组件未重新挂载。给所有页面切换用的<Link>加上prefetch={false}：

  <Link href="/week" prefetch={false}>周天气预报</Link>
  

• 给useEffect添加路由依赖：使用App Router的usePathname()钩子，把当前路由路径作为useEffect的依赖项，确保每次路由切换都触发数据请求：

  import { usePathname } from 'next/navigation';
  import { useEffect, useState } from 'react';
  
  export default function HomePage() {
    const pathname = usePathname();
    const [weatherData, setWeatherData] = useState(null);
  
    useEffect(() => {
      const loadWeather = async () => {
        const pos = await getPosition();
        const data = await fetchApi(pos);
        setWeatherData(data);
      };
      loadWeather();
    }, [pathname]); // 路由变化时重新执行effect
  
    return <div>{weatherData ? /* 渲染天气内容 */ : '加载中...'}</div>;
  }
  

• 改用服务器端数据获取：App Router的服务器组件更适合处理数据获取逻辑，能避免客户端useEffect的执行时机问题。如果需要客户端的位置信息，可以让客户端把经纬度通过URL参数传递给服务器组件，再在服务器端调用OpenWeatherAPI：

  // app/week/page.js（服务器组件）
  export default async function WeekPage({ searchParams }) {
    const { lat, lon } = searchParams;
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=YOUR_API_KEY`,
      { cache: 'no-store' } // 禁用缓存，确保每次请求获取最新数据
    );
    const data = await res.json();
    return <div>{/* 渲染周预报内容 */}</div>;
  }
  

  客户端跳转时携带参数：<Link href={/week?lat=${lat}&lon=${lon}} prefetch={false}>

• 强制组件重新挂载：在根布局中给页面容器加上基于路由的key，确保切换路由时页面组件完全卸载后重新挂载：

  // app/layout.js
  import { usePathname } from 'next/navigation';
  
  export default function RootLayout({ children }) {
    const pathname = usePathname();
    return (
      <html lang="zh-CN">
        <body>
          <div key={pathname}>{children}</div>
        </body>
      </html>
    );
  }
  

• 处理移动端节流限制：移动端Chrome对后台页面的JS执行有节流机制，快速切换时页面可能处于后台导致useEffect延迟执行。可以用唤醒锁临时阻止节流：

  useEffect(() => {
    let wakeLock;
    const fetchData = async () => {
      try {
        wakeLock = await navigator.wakeLock?.request('screen');
        const pos = await getPosition();
        await fetchApi(pos);
      } catch (e) {
        console.log('无法获取唤醒锁：', e);
      } finally {
        wakeLock?.release();
      }
    };
    fetchData();
  }, []);
  

内容的提问来源于stack exchange，提问作者Hsiao Heng Jie