Next.js SSG模式下无法实时识别屏幕尺寸切换组件的解决方案咨询

问题根因 #

• react-device-detect 核心判断逻辑基于HTTP请求的User-Agent字符串，而非实时视口宽度：
  • SSG构建阶段会生成固定静态内容，构建时就已经确定了isMobile、BrowserView/MobileView的初始输出值，静态页到客户端后默认不会重新计算
  • 刷新页面后生效是因为刷新时客户端重新请求，库会重新读取当前UA判断，但单纯调整窗口大小不会触发UA变化，自然不会更新
• 纯React CSR场景未遇到问题属于巧合，该库本身默认不会响应窗口尺寸变化，只是之前的测试场景刚好UA和视口匹配。

可行解决方案 #

方案1：切换为基于视口宽度的实时判断（最匹配按屏幕尺寸切换的需求） #

直接监听视口宽度变化，不需要依赖react-device-detect，准确性更高：

1. 自定义判断移动端视口的Hook，实时响应窗口变化

import { useState, useEffect } from 'react';

// 阈值可根据需求调整，默认768px为移动端/PC端分界
const useIsMobileViewport = (breakpoint = 768) => {
  const [isMounted, setIsMounted] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    const handleResize = () => {
      setIsMobile(window.innerWidth < breakpoint);
    };
    // 初始化判断
    handleResize();
    // 监听窗口尺寸变化
    window.addEventListener('resize', handleResize);
    // 组件卸载清除监听
    return () => window.removeEventListener('resize', handleResize);
  }, [breakpoint]);

  // SSG阶段返回默认值避免hydration不匹配，客户端挂载后再更新
  return isMounted ? isMobile : false;
};

2. 改造Header组件

const Header = ({ pathname }) => {
  const isMobile = useIsMobileViewport();
  return (
    <header>
      {isMobile ? "mobile header" : "header"}
      {!isMobile && <div>normal</div>}
      {isMobile && <div>mobile</div>}
    </header>
  );
};

export default Header;

如果不需要复杂逻辑，也可以直接用CSS媒体查询实现，性能更好：

/* 全局CSS */
.browser-view { display: block; }
.mobile-view { display: none; }
@media (max-width: 767px) {
  .browser-view { display: none; }
  .mobile-view { display: block; }
}

const Header = ({ pathname }) => (
  <header>
    <div className="browser-view">header normal</div>
    <div className="mobile-view">mobile header mobile</div>
  </header>
);

方案2：仍使用react-device-detect，强制客户端侧重新计算 #

如果确实需要基于UA判断设备类型（而非视口尺寸），可以强制组件客户端挂载后重新读取判断值，解决SSG静态内容固定的问题：

import { useState, useEffect } from 'react';
import { isMobile, BrowserView, MobileView } from "react-device-detect";

const Header = ({ pathname }) => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  // 客户端挂载后再渲染依赖UA判断的内容
  if (!isClient) return null;

  return (
    <header>
      {isMobile ? "mobile header" : "header"}
      <BrowserView>normal</BrowserView>
      <MobileView>mobile</MobileView>
    </header>
  );
};

export default Header;

注意该方案仍然不会响应窗口尺寸变化，仅适合按设备类型而非窗口大小区分的场景。

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