URL参数变化时如何触发Server Component重新获取数据？

问题分析 #

你的Page组件是Next.js App Router的服务器组件，默认情况下，仅修改searchParams的客户端路由切换不会触发服务器组件重新执行数据获取逻辑。虽然你调用了router.refresh()，但因状态与URL不同步、路由更新时机等问题，导致数据未重新加载。

修复步骤 #

1. 同步分页组件状态与URL参数 #

当前Pagination的currentPage仅在初始化时读取URL值，URL变更时状态不会同步，添加监听逻辑：

// Pagination.tsx
useEffect(() => {
  const pageFromUrl = parseInt(searchParams.get('page') || '1', 10);
  if (pageFromUrl !== currentPage) {
    setCurrentPage(pageFromUrl);
  }
}, [searchParams, currentPage]);

2. 优化路由更新逻辑 #

修改路由更新代码，用replace避免历史记录重复，移除多余的router.refresh()：

// Pagination.tsx
useEffect(() => {
  const current = new URLSearchParams(searchParams);
  
  if (currentPage === 1) {
    current.delete('page');
  } else {
    current.set('page', currentPage.toString());
  }

  const newSearch = current.toString();
  const newUrl = newSearch ? `${pathname}?${newSearch}` : pathname;

  router.replace(newUrl, { scroll: false });
}, [currentPage, router, pathname, searchParams]);

3. 让服务器组件响应参数变化（关键） #

App Router中服务器组件默认缓存数据，需配置强制重新验证，或改用客户端数据获取：

方式一：禁用服务器组件缓存

在Page组件添加revalidate配置，强制参数变化时重新获取数据：

// Page.tsx
export const revalidate = 0; // 禁用缓存，每次请求重新获取

const Page = async (searchParams: { [key: string]: string | string[] | undefined }) => {
  const page = typeof searchParams.page === 'string' ? Number(searchParams.page) : 1;
  const collections = await getCollections({ page });

  return (
    <>
      <div className={styles.categoryWrapper}>
        {collections?.data?.map(collection => <Category data={collection} key={collection?.id} />)}
      </div>
      <Pagination type="collection" />
    </>
  );
};

export default Page;

方式二：改用客户端数据获取（更灵活）

将数据获取移到客户端，用useSWR或react-query实现参数变化自动重新请求：

// Page.tsx 顶部添加客户端指令
'use client';

import useSWR from 'swr';

const Page = () => {
  const searchParams = useSearchParams();
  const page = typeof searchParams.get('page') === 'string' ? Number(searchParams.get('page')) : 1;
  
  const { data: collections, isLoading } = useSWR(['collections', page], () => getCollections({ page }));

  if (isLoading) return <div>加载中...</div>;

  return (
    <>
      <div className={styles.categoryWrapper}>
        {collections?.data?.map(collection => <Category data={collection} key={collection?.id} />)}
      </div>
      <Pagination type="collection" />
    </>
  );
};

export default Page;

4. 验证效果 #

修改完成后，点击分页按钮时：

• URL的page参数会正确更新
• 页面会自动加载对应页码的集合数据
• 手动修改URL参数，分页状态也会同步更新

内容的提问来源于stack exchange，提问作者meelo-dreams