NextJS更新客户端组件时刷新嵌套服务端组件的方案咨询

你遇到的问题本质是服务端组件（Server Component）和客户端组件（Client Component）的运行环境差异：服务端组件在服务端渲染完成后就定型了，客户端组件的状态变化不会自动触发服务端组件重新请求数据，而且服务端组件无法直接接收客户端的动态状态作为props（服务端渲染时拿不到客户端状态）。

下面是几个成熟的解决模式，按推荐程度排序：

1. 通过URL Query传递状态（最符合Next.js设计理念） #

核心思路是把客户端的筛选状态同步到URL的query参数中，路由变化会自动触发服务端组件重新渲染，服务端组件从searchParams中读取参数并请求对应数据。

客户端组件代码： #

'use client';
import { useRouter, useSearchParams } from 'next/navigation';

export default function Client() {
  const router = useRouter();
  const searchParams = useSearchParams();
  // 从URL中读取当前筛选条件，作为下拉框的默认值
  const currentFilter = searchParams.get('filter') || 'all';

  const handleFilterChange = (e) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('filter', e.target.value);
    // 更新URL，触发服务端组件重新渲染
    router.push(`?${newParams.toString()}`, { scroll: false });
  };

  return (
    <div>
      <select value={currentFilter} onChange={handleFilterChange}>
        <option value="all">全部</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
      </select>
      {/* 服务端组件会自动根据searchParams重新获取数据 */}
      <Server />
    </div>
  );
}

服务端组件代码： #

export default async function Server({ searchParams }) {
  const filter = searchParams?.filter || 'all';
  // 根据筛选条件从数据库/外部API获取数据
  const data = await fetchData(filter);

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

// 模拟服务端数据获取函数
async function fetchData(filter) {
  // 实际场景中替换为数据库查询或API请求
  const res = await fetch(`https://api.example.com/data?filter=${filter}`);
  return res.json();
}

2. 客户端组件调用服务端API渲染UI #

如果不想修改URL，可以在客户端组件中监听状态变化，调用服务端API获取数据后直接渲染UI。这种方式放弃了服务端组件的直接嵌套，改用客户端组件处理数据请求和渲染。

代码示例： #

'use client';
import { useState, useEffect } from 'react';

export default function Client() {
  const [filter, setFilter] = useState('all');
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  // 筛选条件变化时重新请求数据
  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      const res = await fetch(`/api/data?filter=${filter}`);
      const result = await res.json();
      setData(result);
      setLoading(false);
    };
    loadData();
  }, [filter]);

  return (
    <div>
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>
        <option value="all">全部</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
      </select>
      {loading ? <div>加载中...</div> : (
        <div>
          {data.map(item => <div key={item.id}>{item.name}</div>)}
        </div>
      )}
    </div>
  );
}

对应的app/api/data/route.js服务端API：

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const filter = searchParams.get('filter') || 'all';
  // 这里处理服务端逻辑，比如查询数据库
  const data = await fetch(`https://api.example.com/data?filter=${filter}`).then(res => res.json());
  return Response.json(data);
}

3. 使用React use钩子 + Suspense（Next.js 13+） #

利用Next.js 13+支持的React use钩子，可以在客户端组件中直接调用服务端函数，监听状态变化时重新执行函数获取数据，配合Suspense处理加载状态。

代码示例： #

'use client';
import { useState, use } from 'react';
import { Suspense } from 'react';
// 服务端数据获取函数，放在lib目录确保仅在服务端运行
import { fetchData } from '@/lib/data';

export default function Client() {
  const [filter, setFilter] = useState('all');

  return (
    <div>
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>
        <option value="all">全部</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
      </select>
      <Suspense fallback={<div>加载中...</div>}>
        <DataDisplay filter={filter} />
      </Suspense>
    </div>
  );
}

// 子组件中用use钩子调用服务端函数
function DataDisplay({ filter }) {
  const data = use(fetchData(filter));
  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

lib/data.js中的服务端函数：

export async function fetchData(filter) {
  const res = await fetch(`https://api.example.com/data?filter=${filter}`);
  return res.json();
}

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