如何按设备尺寸展示不同组件？Next.js中react-responsive SSR失效求方案

针对react-responsive在Next.js SSR中无法运行的问题，这里提供几种实用的替代方案：

1. CSS媒体查询（优先推荐） #

如果只是简单的显示/隐藏或样式差异，直接用CSS媒体查询是最高效的方案，完全兼容SSR，无需JS逻辑。

示例代码：

/* 全局样式或组件模块样式 */
.mobile-content {
  display: block;
}
.desktop-content {
  display: none;
}

/* 桌面端阈值（可根据需求调整） */
@media (min-width: 768px) {
  .mobile-content {
    display: none;
  }
  .desktop-content {
    display: block;
  }
}

组件中使用：

<div className="mobile-content">移动端专属内容</div>
<div className="desktop-content">桌面端专属内容</div>

2. 客户端状态监听（useEffect + matchMedia） #

适合需要基于设备尺寸做复杂逻辑判断的场景，通过客户端监听窗口变化切换组件。

Next.js 13+ App Router需添加'use client'声明：

'use client';

import { useState, useEffect } from 'react';
import MobileComponent from './MobileComponent';
import DesktopComponent from './DesktopComponent';

export default function ResponsiveComponent() {
  const [isDesktop, setIsDesktop] = useState(false);

  useEffect(() => {
    // 初始化匹配状态
    const mediaQuery = window.matchMedia('(min-width: 768px)');
    setIsDesktop(mediaQuery.matches);

    // 监听窗口尺寸变化
    const handleResize = (e) => setIsDesktop(e.matches);
    mediaQuery.addEventListener('change', handleResize);

    // 清理监听
    return () => mediaQuery.removeEventListener('change', handleResize);
  }, []);

  return isDesktop ? <DesktopComponent /> : <MobileComponent />;
}

3. 服务器端UA检测 + 客户端监听（避免闪烁） #

如果想避免客户端渲染时的内容闪烁，可以先在服务器端通过User-Agent判断设备类型，再在客户端监听窗口变化做动态调整。

服务器端页面组件（App Router）： #

import { headers } from 'next/headers';
import ResponsiveContent from './ResponsiveContent';

export default function Page() {
  const userAgent = headers().get('user-agent') || '';
  // 简单判断移动设备（可根据需求优化判断逻辑）
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);

  return <ResponsiveContent initialIsMobile={isMobile} />;
}

客户端内容组件： #

'use client';

import { useState, useEffect } from 'react';
import MobileContent from './MobileContent';
import DesktopContent from './DesktopContent';

export default function ResponsiveContent({ initialIsMobile }) {
  const [isMobile, setIsMobile] = useState(initialIsMobile);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 767px)');
    setIsMobile(mediaQuery.matches);

    const handleResize = (e) => setIsMobile(e.matches);
    mediaQuery.addEventListener('change', handleResize);
    return () => mediaQuery.removeEventListener('change', handleResize);
  }, []);

  return isMobile ? <MobileContent /> : <DesktopContent />;
}

4. 动态导入禁用SSR（兼容react-responsive） #

如果一定要使用react-responsive，可以通过next/dynamic将其设为纯客户端组件，禁用SSR：

import dynamic from 'next/dynamic';

// 动态导入react-responsive的MediaQuery组件，禁用SSR
const MediaQuery = dynamic(
  () => import('react-responsive').then((mod) => mod.MediaQuery),
  { ssr: false }
);

export default function ResponsiveComponent() {
  return (
    <>
      <MediaQuery minWidth={768}>
        <DesktopComponent />
      </MediaQuery>
      <MediaQuery maxWidth={767}>
        <MobileComponent />
      </MediaQuery>
    </>
  );
}

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