如何在Next.js浅客户端导航中避免触发hydrateRoot()？

示例复现代码 #

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

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

  return (
    <>
      <main>
        <Link href="?a=1">Link 1</Link>
        <Link href="?a=2">Link 2</Link>

        <div onClick={() => router.push('?a=1', undefined, {shallow: true})}>router.push 1</div>
        <div onClick={() => router.push('?a=2', undefined, {shallow: true})}>router.push 2</div>
        
        <div onClick={() => window.history.pushState({}, '', '?a=1')}>pushState 1</div>
        <div onClick={() => window.history.pushState({}, '', '?a=2')}>pushState 2</div>
      </main>
    </>
  )
}

问题现象 #

通过React性能分析器可见：

• 点击Link组件、调用带shallow: true的router.push时，根组件会因hydrateRoot()触发重新渲染：
  
• 直接调用window.history.pushState时，不会触发hydrateRoot()和根组件重渲染。

需求：使用外部状态管理库（如Zustand）处理URL/路由状态时，避免这种不必要的根组件重渲染。

解决方法 #

1. 自定义路由状态同步逻辑（推荐） #

绕过Next.js默认的路由事件监听，手动将路由状态同步到Zustand，同时用pushState更新URL，避免触发Next.js的全局重渲染：

第一步：创建Zustand Store及路由工具函数

// store.js
import { create } from 'zustand'

// 存储路由查询参数的状态
export const useRouteStore = create((set) => ({
  query: {},
  setQuery: (newQuery) => set({ query: newQuery }),
}))

// 自定义更新路由查询参数的函数
export const updateRouteQuery = (newQuery) => {
  const searchParams = new URLSearchParams(window.location.search)
  // 合并新的查询参数
  Object.entries(newQuery).forEach(([key, value]) => {
    value == null ? searchParams.delete(key) : searchParams.set(key, value)
  })
  
  const newUrl = `${window.location.pathname}?${searchParams.toString()}`
  // 更新浏览器历史记录，不触发Next.js路由事件
  window.history.pushState({}, '', newUrl)
  // 同步状态到Zustand
  useRouteStore.getState().setQuery(Object.fromEntries(searchParams))
}

// 监听浏览器前进后退事件，同步状态
if (typeof window !== 'undefined') {
  window.addEventListener('popstate', () => {
    const searchParams = new URLSearchParams(window.location.search)
    useRouteStore.getState().setQuery(Object.fromEntries(searchParams))
  })
}

第二步：在组件中使用自定义逻辑

import { updateRouteQuery, useRouteStore } from './store'

export default function Home() {
  // 只订阅需要的状态，避免不必要重渲染
  const currentA = useRouteStore((state) => state.query.a)

  return (
    <>
      <main>
        <div onClick={() => updateRouteQuery({ a: '1' })}>Link 1</div>
        <div onClick={() => updateRouteQuery({ a: '2' })}>Link 2</div>
        
        <p>当前a参数值：{currentA}</p>
      </main>
    </>
  )
}

2. 隔离路由相关组件 #

如果必须使用Next.js原生路由API，可将路由操作逻辑封装到独立组件中，用React.memo缓存组件，避免根组件重渲染：

// RouteControls.js
import { memo } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

// 用memo缓存组件，仅当props变化时重渲染
const RouteControls = memo(() => {
  const router = useRouter()
  
  return (
    <div>
      <Link href="?a=1">Link 1</Link>
      <Link href="?a=2">Link 2</Link>
      <div onClick={() => router.push('?a=1', undefined, { shallow: true })}>router.push 1</div>
      <div onClick={() => router.push('?a=2', undefined, { shallow: true })}>router.push 2</div>
    </div>
  )
})

export default RouteControls

然后在根组件中引用：

import RouteControls from './RouteControls'

export default function Home() {
  // 根组件不会因路由操作重渲染
  return (
    <>
      <main>
        <RouteControls />
        {/* 其他根组件内容 */}
      </main>
    </>
  )
}

3. 迁移到Next.js App Router #

App Router采用了更细粒度的渲染机制，路由变化只会影响关联的服务器/客户端组件，不会触发根组件全局重渲染。如果项目允许迁移，这是从根源解决问题的方案。

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