Next.js SPA来回导航后iPhone端出现整页刷新问题求助

针对Next.js 13.4.12在iPhone上多次导航后搜索页整页刷新的问题，以下是具体解决办法：

1. 调整路由缓存上限 #

Next.js默认的路由缓存条目数通常为5，当导航次数超过上限时会触发旧缓存清理并强制刷新页面。可以在next.config.js中手动增大缓存上限：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    routerCacheMaxSize: 20, // 根据业务需求调整缓存页面数量
  },
}

module.exports = nextConfig

2. 优化预取策略 #

默认预取会自动缓存目标页面，频繁预取可能快速耗尽缓存配额。可以关闭非必要页面的预取，或改为按需预取：

• 关闭特定链接预取：

import Link from 'next/link'

// 关闭产品页链接的自动预取
<Link href="/product/1" prefetch={false}>产品1</Link>

• 仅在用户交互时触发预取（如hover操作）：

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

export default function SearchPage() {
  const router = useRouter()

  const handlePrefetch = (href: string) => {
    router.prefetch(href)
  }

  return (
    <Link 
      href="/product/1" 
      prefetch={false}
      onMouseEnter={() => handlePrefetch('/product/1')}
    >
      产品1
    </Link>
  )
}

3. 自定义页面缓存策略 #

对于搜索页这类动态页面，可通过缓存配置控制缓存有效期或范围，避免缓存被频繁清理：

// 搜索页 page.tsx
import { unstable_cache } from 'next/cache'

// 缓存搜索结果，限定缓存标签和有效期
const fetchSearchResults = unstable_cache(
  async (searchQuery) => {
    const res = await fetch(`/api/search?query=${searchQuery}`, {
      cache: 'force-cache'
    })
    return res.json()
  },
  ['search-results'], // 缓存键前缀
  { revalidate: 300, tags: ['search'] } // 5分钟重新验证，标记缓存组
)

export default async function SearchPage({ searchParams }) {
  const results = await fetchSearchResults(searchParams.q)
  // 页面渲染逻辑
}

4. 减少页面内存占用 #

iPhone的内存限制更严格，页面组件未及时清理的状态、订阅或定时器会增加内存消耗，间接导致缓存被提前清理：

// 产品页 page.tsx
import { useEffect } from 'react'

export default function ProductPage() {
  useEffect(() => {
    const timer = setInterval(() => { /* 定时任务逻辑 */ }, 1000)
    const subscription = someEvent.subscribe(() => { /* 事件订阅逻辑 */ })

    // 组件卸载时清理资源
    return () => {
      clearInterval(timer)
      subscription.unsubscribe()
    }
  }, [])

  // 页面渲染逻辑
}

5. 替换router.back()的替代方案 #

若缓存清理与router.back()的历史记录操作相关，可尝试直接跳转到搜索页而非依赖浏览器历史：

import { useRouter } from 'next/navigation'

export default function ProductPage() {
  const router = useRouter()

  const goBackToSearch = () => {
    // 直接跳转搜索页，避免依赖历史记录的缓存问题
    router.push('/search')
  }

  return <button onClick={goBackToSearch}>返回搜索页</button>
}

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