如何将 state 从客户端组件传递到服务器组件？

Question

Next 13 告诉我从客户端组件收集输入并从服务器组件获取数据。 如果我想根据客户端的输入获取数据，如何将 state 从客户端组件传递到服务器组件。

Answer 1

我认为您可以为此使用 SWR。 https://swr.vercel.app/examples/ssr 。 我推测 SWR 是由 next.js 的开发人员构建的，同样在上面的示例中，您可以看到来自客户端的数据被缓存并传递到服务器。

Answer 2

唯一的选择是使用路由器将客户端数据作为 URL 查询传递，

首先，您将客户端组件中的数据推送到 URL：

import { useRouter } from "next/navigation";
//You push when you get the data from the user (ex: OnSubmiting)
router.push(`URL?query=${something}`);

其次，您在服务器组件中获取查询：

const ServerComponent = (searchParams) => { 
  const something = searchParams.something
  console.log(something) //You get your user data here
}
 export default ServerComponen;

Answer 3

如果您在同一页面上，fetch 或 SWR 似乎是合理的。 如果您正在调用另一个页面，您可以使用 searchParams 捕获查询 arguments。

在这种情况下，我将 ordernum 从客户端页面传递到服务器页面。 http://localhost:3000/test/serverpage?ordernum=456

interface PageProps {
  params: Params;
  searchParams: SearchParams;
}

interface Params {
  slug: string;
}

interface SearchParams {
  [key: string]: string | string[] | undefined;
}

export default async function Page({ searchParams }: PageProps) {
  console.log("order num", searchParams.ordernum);
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl font-bold mb-4">Order Number: {searchParams.ordernum}</h1>
    </div>
  );
};

Answer 4

您不能在ssr和csr之间共享声明，因为某些解决方案建议您可以使用查询，但总体而言，您必须使用 HTTP 请求来处理服务器端和客户端之间的数据共享，这涉及创建 API 端点。