Next.js 13：如何通过客户端组件切换服务端组件的Fetch请求路径

核心思路 #

服务端组件在服务器端执行，无法直接被客户端组件触发重新渲染。我们可以通过URL搜索参数传递请求资源类型，客户端按钮点击时修改搜索参数，Next.js会自动重新执行服务端组件并获取对应数据。

修改后的Home服务端组件（page.js） #

import styles from './page.module.css'
import Button from "@/components/Button";

async function getData(resource = 'todos') {
  const res = await fetch(`https://jsonplaceholder.typicode.com/${resource}`);
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default async function Home({ searchParams }) {
  // 从搜索参数读取资源类型，默认使用todos
  const resource = searchParams?.resource || 'todos';
  const data = await getData(resource);

  return (
    <main className={styles.main}>
      <div>
        <h3>当前加载：{resource}</h3>
        {data.map(item => (
          <div key={item.id}>
            {item.id} - {resource === 'todos' ? item.title : item.name}
          </div>
        ))}
      </div>
      <Button currentResource={resource} />
    </main>
  )
}

修改后的Button客户端组件 #

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

export default function Button({ currentResource }){
  const router = useRouter();

  const switchResource = () => {
    const targetResource = currentResource === 'todos' ? 'users' : 'todos';
    // 更新URL搜索参数，触发服务端组件重新渲染
    router.push(`/?resource=${targetResource}`);
  }

  return(
    <button onClick={switchResource}>
      切换到{currentResource === 'todos' ? 'users' : 'todos'}
    </button>
  )
}

关键说明 #

1. 服务端组件通过Next.js自动传入的searchParams props获取URL中的资源类型参数，动态生成请求URL。
2. 客户端组件使用useRouter修改URL搜索参数，URL变化后Next.js会重新执行服务端组件的getData函数，拉取新数据并渲染页面。
3. 这种方式符合Next.js服务端渲染逻辑，避免了客户端直接调用服务端函数的跨环境问题。

内容的提问来源于stack exchange，提问作者Александр