如何在 Next.js 14 应用程序路由器中将数据从服务器组件传递到客户端组件？

Question

如何在 Next.js 13 应用程序路由器中将数据从服务器组件传递到客户端组件？

我正在 page.tsx 中调用外部 API，它给出了该人的城市。我想将这个城市传递给可以显示和更改该城市的客户端组件。实现这一目标的最佳方法是什么？在 React 中，我们可以使用 redux，但由于这是 next.js 13 服务器组件，不知道如何操作。

应用程序/page.tsx

const Page = async () => {
  const city = await getCity();

  const hotels = await getHotelsByCity({
    city: city,
  });

  return (
    <div className="pt-24 md:pt-28 flex md:flex-row md:flex-wrap flex-col">
      {hotels &&
        hotels.map((hotel) => {
          <div>{hotel}</div>;
        })}
    </div>
  );
};

export default Page;

应用程序/组件/导航栏/Location.tsx

"use client";

import useSelectLocationModal from "@/app/hooks/useSelectLocationModal";

export default function Location() {
  const selectLocationModal = useSelectLocationModal();

  return (
    <div
      className="flex items-center cursor-pointer"
      onClick={() => selectLocationModal.onOpen()}
    >
      <p>{city}</p> 

    </div>
  );
}

Answer 1

您可以将数据作为 props 传递，您只需要确保它是序列化的。

例如

export default async function Home() {

    let data;
    console.log("fetching data");
    try{
        const res = await fetch(process.env.API_URL + '/endpoint', {
            headers: {
                'Accept': 'application/json'
            },
            next: {
                tags: ['homepage']
            }
        });
        data = await res.json();
    }
    catch (e) {
        console.log(e);
    }

    return (
        <main>
            <YourClientComponent data={data}/>
        </main>
    )
}