NextJS中如何判断页面是否由浏览器返回按钮触发加载？并实现返回加载时的数据加载

Great question! In Next.js, detecting whether a page load was triggered by the browser's back or forward button (often called history traversal) requires combining browser APIs with Next.js's client-side routing tools. Let's break down the most reliable approaches:

1. Use the Modern Navigation API #

The navigation API is the latest standard for tracking navigation behavior and works seamlessly in modern browsers. It directly tells you if the load came from back/forward navigation.

Example (Client Component Only) #

'use client';

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    // Check if navigation was triggered by back/forward
    if (navigation.type === 'back_forward') {
      console.log('Page loaded via browser back/forward button!');
      // Execute your data loading logic here
      loadCriticalData();
    }
  }, []);

  return <div>Your page content here</div>;
}

Notes:

• Requires 'use client' since this relies on browser-specific APIs.
• Supported in Chrome 80+, Firefox 75+, Edge 80+ (most modern users fall into this category).

2. Navigation Timing API (Legacy but Wider Compatibility) #

If you need to support older browsers, the Navigation Timing API (via performance.getEntriesByType) is a solid fallback. It gives you details about how the page was loaded.

Example #

'use client';

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const navEntry = performance.getEntriesByType('navigation')[0];
    // Check if the navigation type is back/forward
    if (navEntry?.type === 'back_forward') {
      console.log('Triggered by back/forward navigation');
      loadYourData();
    }
  }, []);

  return <div>Your page content here</div>;
}

Notes:

• This API is marked as deprecated in some specs, but it's still widely supported in older browsers.
• For most modern apps, the Navigation API (method 1) is preferred.

3. Manual Navigation Flagging (Full Compatibility) #

For maximum compatibility across all browsers, you can manually track whether a navigation was initiated by your app (e.g., via next/Link or router.push) vs. the browser's back/forward buttons.

Step 1: Mark Manual Navigations #

Add a flag to sessionStorage whenever the user navigates via your app's links:

import Link from 'next/link';
import { useRouter } from 'next/navigation';

function AppLink({ href, children }) {
  const router = useRouter();

  const handleNavigation = () => {
    // Set a flag to indicate this was a manual app navigation
    sessionStorage.setItem('isManualNav', 'true');
  };

  // Handle both Link clicks and programmatic router pushes
  const handleProgrammaticNav = () => {
    handleNavigation();
    router.push(href);
  };

  return (
    <Link href={href} onClick={handleNavigation}>
      {children}
    </Link>
  );
}

Step 2: Check the Flag in Your Page #

In your page component, check if the flag exists. If not, the load was triggered by back/forward:

'use client';

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const isManual = sessionStorage.getItem('isManualNav') === 'true';
    
    if (!isManual) {
      console.log('Loaded via browser back/forward');
      executeDataLoad();
    }

    // Reset the flag so it doesn't affect future navigations
    sessionStorage.removeItem('isManualNav');
  }, []);

  return <div>Your page content here</div>;
}

Notes:

• Works in all browsers, including legacy ones.
• Requires you to wrap all app navigations (links and programmatic pushes) to set the flag.

内容的提问来源于stack exchange，提问作者Mr. Robot