如何从客户端组件向React Server Component传参以调用API？

React Server Components（RSC）完全支持基于用户交互动态构造API请求，并非只能使用静态URL。以下是两种最常用的实现方式：

方式一：通过路由查询参数传递数据 #

用户交互后触发路由跳转，将参数附在URL的查询参数中，对应的服务端组件在渲染时读取这些参数，发起带动态参数的API请求。

客户端交互组件（搜索输入框） #

'use client';

import { useRouter } from 'next/navigation';

export default function SearchInput() {
  const router = useRouter();

  const handleSubmit = (e) => {
    e.preventDefault();
    const term = e.target.searchTerm.value.trim();
    if (term) {
      // 跳转至带查询参数的路由，触发服务端组件重新渲染
      router.push(`/search?term=${encodeURIComponent(term)}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="searchTerm" placeholder="输入关键词..." />
      <button type="submit">搜索</button>
    </form>
  );
}

服务端结果组件 #

import { headers } from 'next/headers';
import fetchData from './fetchData';

export default async function SearchResults() {
  // 从请求路由中提取查询参数
  const url = new URL(headers().get('referer') || '');
  const searchTerm = url.searchParams.get('term') || '';

  if (!searchTerm) {
    return <div>请输入搜索关键词</div>;
  }

  // 服务端发起带动态参数的API请求
  const results = await fetchData(searchTerm);

  return (
    <div>
      <h3>关于「{searchTerm}」的搜索结果</h3>
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

方式二：通过服务端Action传递数据 #

如果不想触发路由跳转，可以用服务端Action（Server Actions）直接将客户端数据传递到服务端，在服务端逻辑中构造API请求，再将结果返回给客户端渲染。

定义服务端Action #

'use server';

export async function performSearch(searchTerm) {
  if (!searchTerm.trim()) {
    return { error: '请输入搜索关键词' };
  }

  // 服务端发起动态API请求（支持GET/POST）
  const response = await fetch(`https://myapi.com/api/search?term=${encodeURIComponent(searchTerm)}`);
  // 若需POST请求，可替换为：
  // const response = await fetch('https://myapi.com/api/search', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ term: searchTerm })
  // });

  const results = await response.json();
  return { results };
}

客户端调用Action #

'use client';

import { useState } from 'react';
import { performSearch } from './searchActions';

export default function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const [error, setError] = useState('');

  const handleSearch = async () => {
    setError('');
    const res = await performSearch(searchTerm);
    if (res.error) {
      setError(res.error);
    } else {
      setResults(res.results);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="输入关键词..."
      />
      <button onClick={handleSearch}>搜索</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

总结 #

不管是GET请求带查询参数，还是POST请求带请求体，RSC都能通过路由参数或服务端Action实现动态构造API请求，完全支持用户交互驱动的数据传递场景。

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