这是一个很好的问题，我没有找到任何关于它的东西，所以我试了一下。正如您在上面的评论中所指出的，客户端和服务器组件都可以在服务器上运行。但是它们跑的方式不同 *
假设你想公开一个执行抓取的组件。如果它可以直接在服务器组件中这样做，速度会更快。但是，我们也希望它在客户端设置或早期版本的React中兼容（并工作）。
下面是我想到的：

export function MyFetchingComponent() {
  try {
    // This is forbidden in server components
    React.useEffect(() => {});
  } catch (e) {
    return <MyServerFetchingComponent />;
  }
  return <MyClientFetchingComponent />;
}

这是假设客户端和服务器风格如下：

// This is how the data fetching happens, used in both case
async function getData() {
  const res = await fetch("https://httpbin.org/json")
  return (await res.json()).slideshow.title;
}

// This is what is run inside a server component setup
async function MyServerFetchingComponent() {
  const data = await getData();
  return (
    <div>From the server: {data}</div>
  );
}

// This is classic client React
function MyClientFetchingComponent() {
  const [data, setData] = React.useState(null);
  React.useEffect(function fetchEffect() {
    getData().then(setData);
  }, []);
  return (
    <div>From the client: {data}</div>
  );
}

• 注意：尚未全面测试，you can play with it in that sandbox*