Next.js 13服务端组件如何基于客户端依赖变量重新获取数据？

我已经搭建了Next.js 13应用，正尝试合理划分客户端与服务端组件来提升用户体验和性能。目前能通过SSR完成初始渲染的数据获取，但想知道能否在服务端组件中，基于客户端依赖的变化重新获取数据？

示例场景：

• 用户输入搜索词后，根据搜索筛选条件重新获取数据
• 用户点击按钮后，基于useState变量的变化重新获取数据

我原本觉得服务端没法处理这类场景，但希望有可行方案。以下是我想加入搜索筛选功能的服务端组件大致代码：

const session = await getServerSession(authOptions);
if (session.clientData._id === null || !session) {
  return false;
}
const baseUrl = `${process.env.NEXT_PUBLIC_API_URL}/client/projects`;
let req = await fetch(
  `${baseUrl}/?clientId=${session.clientData._id}&status=${status}&page=${page}`
);
return req.json();
}
export default async function ProjectContractCardWrapper({ status }) {
  const data = await fetchData();

  return (
    <>
      {data.map((item) => (
        <ProjectContractCard item={item} />
      ))}
    </>
  );
}

TLDR：想在Next.js 13服务端组件中，实现类似useEffect依赖数组变化触发重新获取数据的能力。

服务端组件本身无法直接监听客户端状态（如useState变量），但可以通过以下几种方式间接实现"依赖变化触发数据重获取"的效果：

方案1：通过路由搜索参数触发服务端组件重渲染 #

服务端组件会在路由参数变化时自动重新执行数据获取逻辑。将客户端的筛选条件（搜索词、status、page等）同步到URL的搜索参数中，即可触发服务端重新拉取数据。

改造思路 #

1. 在客户端组件中处理用户交互，通过useRouter或useSearchParams更新URL搜索参数
2. 服务端组件接收searchParams作为props，从中提取参数并传入数据获取函数

代码示例 #

// 服务端组件 ProjectContractCardWrapper
export default async function ProjectContractCardWrapper({ searchParams }) {
  const status = searchParams.status || 'default';
  const page = searchParams.page || 1;
  const data = await fetchData(status, page); // 需修改fetchData接收参数

  return (
    <>
      {data.map((item) => (
        <ProjectContractCard item={item} />
      ))}
    </>
  );
}

// 客户端组件（处理交互逻辑）
'use client';
import { useRouter, useSearchParams } from 'next/navigation';

export default function FilterControls() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const handleStatusChange = (newStatus) => {
    const params = new URLSearchParams(searchParams);
    params.set('status', newStatus);
    params.set('page', 1); // 切换筛选条件时重置页码
    router.push(`?${params.toString()}`);
  };

  return (
    <button onClick={() => handleStatusChange('active')}>显示活跃项目</button>
  );
}

方案2：用客户端组件包裹服务端组件，通过动态props触发重渲染 #

将服务端组件作为客户端组件的子组件，当客户端状态变化时，传递不同的props给服务端组件，触发服务端重新渲染并拉取新数据。

代码示例 #

// 客户端组件（负责状态管理）
'use client';
import { useState } from 'react';
import ProjectContractCardWrapper from './ProjectContractCardWrapper'; // 服务端组件

export default function ProjectPage() {
  const [status, setStatus] = useState('all');
  const [page, setPage] = useState(1);

  return (
    <div>
      <button onClick={() => setStatus('active')}>活跃项目</button>
      <button onClick={() => setStatus('completed')}>已完成项目</button>
      {/* status/page变化时，服务端组件会重新执行fetchData */}
      <ProjectContractCardWrapper status={status} page={page} />
    </div>
  );
}

// 修改后的服务端组件
export default async function ProjectContractCardWrapper({ status, page }) {
  const data = await fetchData(status, page);

  return (
    <>
      {data.map((item) => (
        <ProjectContractCard item={item} />
      ))}
    </>
  );
}

方案3：结合SWR/React Query实现混合模式 #

如果不需要每次都触发服务端组件重渲染，可以用SWR或React Query在客户端处理数据刷新，初始数据由服务端组件提供，兼顾首屏性能和客户端交互灵活性。

代码示例 #

// 服务端组件（提供初始数据）
export default async function ProjectContractCardWrapper() {
  const initialData = await fetchData('all', 1); // 初始默认数据

  return (
    <ProjectClientComponent initialData={initialData} />
  );
}

// 客户端组件（处理筛选和数据刷新）
'use client';
import { useState } from 'react';
import useSWR from 'swr';

const fetcher = async (url) => {
  const res = await fetch(url);
  return res.json();
};

export default function ProjectClientComponent({ initialData }) {
  const [status, setStatus] = useState('all');
  const [page, setPage] = useState(1);
  const baseUrl = `${process.env.NEXT_PUBLIC_API_URL}/client/projects`;
  const url = `${baseUrl}/?clientId=${session.clientData._id}&status=${status}&page=${page}`;

  const { data, error } = useSWR(url, fetcher, {
    initialData, // 用服务端获取的数据作为初始值
  });

  if (error) return <div>加载失败</div>;
  if (!data) return <div>加载中...</div>;

  return (
    <div>
      <button onClick={() => setStatus('active')}>活跃项目</button>
      <div>
        {data.map((item) => (
          <ProjectContractCard item={item} />
        ))}
      </div>
    </div>
  );
}

关键说明 #

• 服务端组件本身无法直接监听客户端状态变化，所有触发数据重获取的逻辑本质都是触发服务端组件重新渲染
• 方案选择建议：
  • 需要SEO友好的筛选结果页面 → 用路由搜索参数方案
  • 内部交互不需要暴露URL → 用动态props传递方案
  • 需要灵活的客户端数据缓存和刷新 → 用SWR/React Query混合模式

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