Next 13服务器组件如何获取客户端状态数据？SWR与fetch对比

1. 打破「鸡生蛋」困境：状态传递方案 #

核心思路是用客户端组件作为状态容器，根据编辑状态切换渲染逻辑，直接将客户端状态通过 props 传递给服务器组件——Next 13 允许客户端组件导入并使用服务器组件（反之不行），完全可以避开所谓的循环依赖问题。

实现示例 #

// 客户端容器组件（ChartContainer.client.js）
'use client';
import { useState } from 'react';
import ServerChart from './ServerChart';
import ClientDragChart from './ClientDragChart';

export default function ChartContainer() {
  const [isEditing, setIsEditing] = useState(true);
  const [chartConfig, setChartConfig] = useState({
    position: { x: 0, y: 0 },
    coinId: 'bitcoin'
  });

  if (isEditing) {
    // 编辑模式：渲染带拖拽交互的客户端组件，维护状态
    return <ClientDragChart config={chartConfig} onUpdate={setChartConfig} onExit={() => setIsEditing(false)} />;
  }

  // 非编辑模式：将配置作为 props 传给服务器组件，由服务端拉取数据渲染
  return <ServerChart {...chartConfig} />;
}

// 服务器组件（ServerChart.js）
export default async function ServerChart({ position, coinId }) {
  // 用 Next 13 原生 fetch 获取对应币种数据，自动支持缓存/ISR
  const res = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=7`, {
    next: { revalidate: 3600 } // 1小时重新验证数据
  });
  const data = await res.json();

  return (
    <div style={{ position: 'absolute', left: position.x, top: position.y }}>
      <h3>{coinId.toUpperCase()} 7日走势</h3>
      {/* 渲染图表组件（基于服务端获取的数据） */}
      <CryptoChart data={data.prices} />
    </div>
  );
}

可选优化：状态持久化 #

如果需要页面刷新后保留配置，可将状态序列化到 URL 查询参数或本地存储：

• 客户端退出编辑时更新 URL：

  import { useRouter } from 'next/navigation';
  
  const router = useRouter();
  const exitEdit = () => {
    const params = new URLSearchParams();
    params.set('coinId', chartConfig.coinId);
    params.set('x', chartConfig.position.x);
    params.set('y', chartConfig.position.y);
    router.push(`/dashboard?${params.toString()}`);
    setIsEditing(false);
  };
  

• 服务器组件直接从 URL 读取参数：

  export default async function ServerChart({ searchParams }) {
    const coinId = searchParams.get('coinId') || 'bitcoin';
    const x = parseInt(searchParams.get('x')) || 0;
    const y = parseInt(searchParams.get('y')) || 0;
    // 后续数据拉取逻辑同上
  }
  

2. SWR vs Next 13 原生 fetch：互补而非替代 #

两者定位不同，不存在「相当」的说法，可根据场景搭配使用：

Next 13 原生 fetch 优势 #

• 服务器端执行：完全在服务端发起请求，不会暴露 API 密钥，也不增加客户端网络负担。
• 自动缓存与 ISR：默认支持请求结果缓存，可通过 next.revalidate 配置增量静态再生，适合非交互场景的静态数据渲染。
• App Router 深度集成：支持并行请求、流式渲染等特性，优化页面加载性能。

SWR 优势 #

• 客户端数据管理：适合编辑模式下的动态数据需求，可按需拉取选中币种的数据（无需提前加载全量币种）。
• 精细化缓存控制：提供聚焦刷新、定时重新验证等策略，支持客户端本地状态与服务器数据同步。
• 跨场景复用：可在客户端组件、服务器组件（需额外配置）甚至纯 React 项目中使用。

场景搭配建议 #

• 非编辑模式（服务器组件）：用 Next 13 原生 fetch，充分利用服务端渲染和自动缓存能力。
• 编辑模式（客户端组件）：用 SWR 按需获取选中币种的预览数据，实现实时更新：

  // 客户端拖拽组件（ClientDragChart.js）
  'use client';
  import useSWR from 'swr';
  
  const fetcher = (url) => fetch(url).then(res => res.json());
  
  export default function ClientDragChart({ config, onUpdate, onExit }) {
    const { data, error } = useSWR(
      config.coinId ? `https://api.coingecko.com/api/v3/coins/${config.coinId}/market_chart?vs_currency=usd&days=7` : null,
      fetcher
    );
  
    if (error) return <div>数据加载失败</div>;
    if (!data) return <div>加载中...</div>;
  
    return (
      <div style={{ position: 'absolute', left: config.position.x, top: config.position.y }}>
        {/* 拖拽交互逻辑 */}
        <CryptoChart data={data.prices} />
        <select value={config.coinId} onChange={(e) => onUpdate({...config, coinId: e.target.value})}>
          <option value="bitcoin">比特币</option>
          <option value="ethereum">以太坊</option>
        </select>
        <button onClick={onExit}>退出编辑</button>
      </div>
    );
  }
  

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