如何在Next.js 13应用路由器中将数据从服务器组件传递到客户端组件？
我在page.tsx中调用了一个外部API，它给出了这个人的城市。我想将这个城市传递给客户端组件，在那里可以显示和更改这个城市。实现这一目标的最佳途径是什么？在React中，我们可以使用redux，但由于这是next.js 13服务器组件，因此不确定如何使用它。
app/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;

app/components/Navbar/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>
  );
}