Next.js如何保留页面实例避免路由切换时重复重新渲染？

默认Next.js路由切换时会卸载旧页面的组件实例，返回时重新创建实例，内部useState、useEffect都会重新执行，所以才会出现随机人名刷新的问题。你要实现的本质是保留页面组件实例不被卸载，而非单纯阻止重渲染，可根据你使用的路由模式选择对应方案：

方案1：Pages Router 自定义全局布局手动缓存 #

不需要修改现有页面代码，仅修改_app.tsx逻辑，将所有访问过的页面保留在DOM中，用CSS控制显示隐藏即可：

// _app.tsx
import { useRouter } from 'next/router'
import { useState, useRef, useEffect } from 'react'
import Layout from './你的布局组件路径'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()
  // 存储已渲染过的页面组件实例
  const renderedPages = useRef(new Map())
  const [, forceUpdate] = useState({})

  useEffect(() => {
    // 路由变化时缓存未访问过的页面
    if (!renderedPages.current.has(router.pathname)) {
      renderedPages.current.set(router.pathname, <Component {...pageProps} />)
      forceUpdate({})
    }
  }, [router.pathname, Component, pageProps])

  return (
    <Layout>
      {/* 仅当前路由匹配的页面显示，其他隐藏不卸载 */}
      {Array.from(renderedPages.current.entries()).map(([pathname, element]) => (
        <div 
          key={pathname} 
          style={{ display: pathname === router.pathname ? 'block' : 'none' }}
        >
          {element}
        </div>
      ))}
    </Layout>
  )
}

方案2：App Router 原生支持（Next.js 13+） #

如果使用App Router模式，仅需满足两个条件即可默认保留页面状态：

1. 给页面组件顶部添加'use client'标记，声明为客户端组件，避免每次路由切换触发服务端重渲染
2. 用Next.js原生<Link>组件做导航跳转，不要使用原生a标签或window.location跳转
   App Router内置的路由缓存机制会自动保留离开页面的组件实例，返回时直接复用，不会重新执行初始化逻辑。

方案3：使用成熟缓存组件库 #

如果不想自己维护缓存逻辑，可以使用专门的React组件缓存库实现，适配成本极低：

1. 安装依赖：npm install react-activation
2. 修改_app.tsx配置：

// _app.tsx
import { AliveScope, KeepAlive } from 'react-activation'
import Layout from './你的布局组件路径'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()
  return (
    <AliveScope>
      <Layout>
        <KeepAlive id={router.pathname}>
          <Component {...pageProps} />
        </KeepAlive>
      </Layout>
    </AliveScope>
  )
}

该库会自动处理组件的缓存、恢复逻辑，还支持自定义配置需要缓存的页面范围，灵活性更高。

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