Next.js iOS端跳转外部页面返回后组件状态未重置问题咨询

问题原因 #

iOS Safari的**前进/后退缓存（BF Cache）**会在用户导航离开时保存页面的完整状态，返回时直接从缓存恢复页面，不会重新触发React组件的初始化流程，导致useState的初始值不会生效，之前修改的状态会被保留。

解决方案 #

方法1：监听pageshow事件重置状态 #

利用浏览器的pageshow事件，该事件在页面加载或从BF Cache恢复时都会触发。我们可以在事件回调中判断页面是否来自缓存，若是则手动重置状态。

修改你的代码如下：

import Head from 'next/head'
import Image from 'next/image'
import { useState, useEffect } from 'react'; // 引入useEffect
import styles from '../styles/Home.module.css'

export default function Home() {
  const [color, setcolor] = useState('#fff');
  
  const a = ()=>{
    setcolor("orange")
  }

  useEffect(() => {
    const handlePageShow = (e) => {
      // 检查页面是否从BF Cache恢复
      if (e.persisted) {
        setcolor('#fff'); // 重置状态为初始值
      }
    };

    window.addEventListener('pageshow', handlePageShow);
    return () => {
      window.removeEventListener('pageshow', handlePageShow);
    };
  }, []);

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" onClick={a} className={styles.card} style={{borderColor:color}}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card} style={{borderColor:color}}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
            style={{borderColor:color}}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card} style={{borderColor:color}}
          >
            
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

方法2：禁用BF Cache（备选方案） #

这种方法可能影响页面导航性能，仅作为兜底方案使用：

• 服务端设置响应头Cache-Control: no-store
• 前端添加空的unload事件监听，强制浏览器不缓存页面：

useEffect(() => {
  const handleUnload = () => {};
  window.addEventListener('unload', handleUnload);
  return () => window.removeEventListener('unload', handleUnload);
}, []);

原理说明 #

BF Cache是iOS Safari为优化页面导航体验设计的机制，但会绕过React组件的初始化逻辑。pageshow事件的persisted属性可以准确判断页面是否来自缓存，此时手动重置状态就能让页面回到初始样式。

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