Remix SSR场景如何获取初始窗口属性实现useMediaQuery

你遇到的闪烁根源非常明确：所有媒体查询判断都放在useEffect中执行，而useEffect必须等客户端hydration完成、首屏已经绘制到页面后才会触发，相当于用户先看到一版基于初始false值渲染的内容，再被替换成匹配实际屏幕尺寸的内容，闪是必然的，硬改初始state为true也只是把闪烁的方向反过来而已。

给你两个经过生产验证的落地方案，都是从挂载层面控制组件渲染，不需要靠CSS隐藏元素： #

方案1：基于React 18 原生API实现（推荐，90%场景够用） #

直接用React 18内置的useSyncExternalStore实现，这是官方专门为订阅浏览器/第三方外部状态设计的Hook，天生适配SSR场景，比自己写useState+useEffect的实现稳定得多，也不会有闪烁问题。

import { useSyncExternalStore } from 'react';

/**
 * 监听媒体查询匹配状态，SSR安全，无首屏闪烁
 * @param query 标准CSS媒体查询字符串，比如`(min-width: 1024px)`
 */
export function useMediaQuery(query: string): boolean {
  // 订阅媒体查询变化事件
  const subscribe = (onChange: () => void) => {
    if (typeof window === 'undefined') return () => {};
    const mq = window.matchMedia(query);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  };

  // 渲染阶段同步读取当前匹配值，客户端首次渲染就能拿到正确结果，不需要等effect
  const getClientSnapshot = () => {
    if (typeof window === 'undefined') return false;
    return window.matchMedia(query).matches;
  };

  // SSR阶段固定返回兜底值，避免hydration报错
  const getServerSnapshot = () => false;

  return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
}

// 常用的宽度判断便捷封装
export const useIsMobile = (breakpoint = 768) => {
  return useMediaQuery(`(max-width: ${breakpoint - 1}px)`);
};

这个实现的优势：

• 没有useEffect的延迟问题，客户端首次渲染同步读取匹配值，从根源消除状态差导致的闪烁
• 用浏览器原生matchMedia代替resize事件监听，只有当媒体查询匹配状态真正改变时才触发重渲染，性能比手动监听resize高很多，也不需要自己写防抖
• 自带React并发渲染状态撕裂防护，不会出现并发模式下的状态不一致问题
• 不匹配媒体查询的组件直接不会挂载，完全符合你要的「从渲染层面控制加载」的需求，不会有CSS隐藏带来的无效渲染开销

注意你原来的实现还有个小bug：resize事件的依赖数组加了state.windowWidth，每次宽度变化都会重新绑定一次事件监听，完全没必要，还增加了内存泄漏风险。 #

方案2：极致零闪烁优化（适合首屏核心模块） #

如果你的首屏核心模块（比如顶部导航、首屏Banner）在移动端和PC端结构差异极大，想要彻底消除任何肉眼可见的切换痕迹，可以在Remix根布局的<head>里加一段内联阻塞脚本，在页面渲染前就把媒体查询结果存在全局变量上：

// root.tsx 里的Layout组件
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 其他meta、link标签 */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              // 脚本在DOM渲染前执行，提前存好初始匹配状态
              window.__initialMQ = {
                isMobile: window.innerWidth < 768,
                isDesktop: window.innerWidth >= 1024
              }
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

然后把上面Hook里的getClientSnapshot改成优先读取这个预存的全局值就行，能做到完全零感知的状态匹配，连hydration阶段的微小状态差都不会有。

如果是不需要首屏直出的非核心复杂组件，直接配合Remix生态通用的<ClientOnly>组件包裹即可，服务端完全不渲染这部分内容，等客户端hydration完成后直接按正确的媒体查询结果挂载，也不会有闪烁问题。 #

最后补充：不要用初始state硬编码true/false的方式凑效果，这种方案在不同尺寸的设备上总有一半概率会出现闪烁，本质是掩耳盗铃。

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