NextJS移动端首次打开时react-responsive组件切换异常如何解决

你的猜测完全正确，该问题是SSR（服务端渲染）场景下的典型问题：

• 服务端运行代码时没有浏览器的window对象，无法获取实际视口宽度，react-responsive的useMediaQuery在服务端默认返回false，导致服务端吐出的HTML内容是桌面端组件
• 前端hydrate（注水）阶段为了避免结构不匹配报错，会优先复用服务端返回的DOM结构，第一次渲染不会触发更新，等hydrate完成、客户端侧useMediaQuery重新计算完成后才会切换为移动端组件，就会出现首次加载渲染错误、甚至页面闪烁的问题
• 应用内页面跳转走的是客户端路由，没有触发服务端渲染，直接在客户端执行判断逻辑，所以运行正常。

有两种常用的修复方案，你可以根据项目情况选择：

方案1：服务端探测设备类型，全局同步判断结果（推荐） #

利用react-responsive提供的ResponsiveContext，将服务端通过请求UA判断得到的设备类型同步给客户端，保证服务端和客户端首次渲染结果完全一致。

以Next.js为例，实现逻辑如下：

1. 服务端接收到请求时，通过请求头的user-agent字段判断当前访问设备是否为移动端
2. 将判断得到的isMobile值传递给页面根组件，通过ResponsiveContext注入全局

// 根组件（Next.js Pages Router的_app.js / App Router的layout.js）
import { ResponsiveContext } from 'react-responsive'

// 这里的isMobile是服务端解析UA后传入的参数
export default function App({ Component, pageProps, isMobile }) {
  return (
    {/* 注入模拟的视口宽度，让服务端和客户端首次渲染的useMediaQuery计算结果一致 */}
    <ResponsiveContext.Provider value={{ width: isMobile ? 400 : 1200 }}>
      <Component {...pageProps} />
    </ResponsiveContext.Provider>
  )
}

该方案不会影响首屏体验，后续客户端视口变化时useMediaQuery会自动监听更新，兼容横竖屏切换、窗口缩放等场景。

方案2：客户端挂载后再渲染对应组件 #

如果不想在服务端做UA解析，可以加一个挂载判断，hydrate阶段显示占位符，客户端挂载完成后再渲染对应的组件：

import { useMediaQuery } from 'react-responsive'
import { useState, useEffect } from 'react'

export default function MyComponent(props) {
  const isMobile = useMediaQuery({ query: `(max-width: 480px)` })
  const [isClientMounted, setIsClientMounted] = useState(false)

  useEffect(() => {
    setIsClientMounted(true)
  }, [])

  // hydrate阶段显示骨架屏/占位符，避免和服务端结构不匹配
  if (!isClientMounted) return <LoadingSkeleton />

  return (
    <Wrapper>
      { isMobile ? <ComponentMobile /> : <ComponentDesktop /> }
    </Wrapper>
  )
}

该方案实现简单无需改造全局逻辑，缺点是首屏会出现极短的占位符，对首屏体验有轻微影响。

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