Next.js中React组件意外在服务端执行而非客户端的问题排查

问题场景 #

开发Next.js移动端导航菜单组件MobileNav时，已在文件顶部标注'use client'，但运行时发现组件仍会在服务端执行：console.log(pathname)出现在服务端日志中，useEffect和usePathname的行为不符合预期。

组件代码 #

'use client'

import { ArrowRight, Menu } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'

const MobileNav = () => {
  const [isOpen, setOpen] = useState<boolean>(false)

  const toggleOpen = () => setOpen((prev) => {
    console.log("toggling menu");
    return !prev
  })

  const pathname = usePathname()
  console.log(pathname);

  useEffect(() => {
    console.log("calling use effect");
    if (isOpen) toggleOpen()
  }, [isOpen, pathname])

  const closeOnCurrent = (href: string) => {
    if (pathname === href) {
      console.log("closing the menu");
      toggleOpen()
    }
  }

  return (
    <div className='sm:hidden'>
      <Menu
        onClick={toggleOpen}
        className='relative z-50 h-5 w-5 text-zinc-700'
      />

      {isOpen ? (
        <div className='fixed animate-in slide-in-from-top-5 fade-in-20 inset-0 z-0 w-full'>
          <ul className='absolute bg-white border-b border-zinc-200 shadow-xl grid w-full gap-3 px-10 pt-20 pb-8'>
            <li>
              <Link
                onClick={() =>
                  closeOnCurrent('/contact')
                }
                className='flex items-center w-full font-semibold'
                href='/contact'>
                Contact Us
              </Link>
            </li>
          </ul>
        </div>
      ) : null}
    </div>
  )
}

export default MobileNav

原因分析 #

Next.js App Router中，'use client'的作用是将组件标记为客户端组件，允许使用客户端专属Hooks（如useEffect、useState），但不会完全跳过服务端渲染（SSR）：

1. 首屏渲染时，服务端会执行组件的同步代码（包括useState初始值、直接写的console.log）来生成HTML，这就是你在服务端日志看到pathname的原因。
2. useEffect属于客户端生命周期钩子，只会在浏览器端的hydration完成后执行，服务端永远不会运行这部分代码。

排查步骤 #

1. 检查'use client'的位置：确保它是文件的第一行，前面没有任何代码、注释或空行——你的代码中这部分是正确的。
2. 区分日志来源：打开浏览器开发者工具的控制台，查看是否有"calling use effect"的输出——这是验证组件是否在客户端正常运行的关键。
3. 检查hydration错误：如果浏览器控制台出现hydration不匹配的错误，会导致客户端组件交互异常，需要修复服务端与客户端渲染内容不一致的问题。
4. 确认组件引用链：即使MobileNav是客户端组件，只要它被导入到服务端组件中，服务端依然会渲染它的初始状态，这是正常的SSR流程。

解决建议 #

1. 分离服务端与客户端日志：将需要仅在客户端输出的日志移到useEffect中，或者通过环境判断过滤：

   useEffect(() => {
     console.log("客户端pathname:", pathname);
   }, [pathname])
   

   或者：

   if (typeof window !== 'undefined') {
     console.log("客户端pathname:", pathname);
   }
   

2. 验证客户端逻辑：检查浏览器控制台中useEffect的输出，确认路径变化时菜单关闭的逻辑是否正常触发。
3. 修复hydration问题：如果存在hydration错误，需要确保服务端渲染的HTML与客户端hydrate时生成的内容完全一致。比如避免在组件顶层使用依赖客户端环境的代码（如直接访问window），可将这类逻辑移到useEffect中。

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