How do I pass data from server component to client component in Next.js 14 app router?

Question

How to pass data from the server component to the client component in Next.js 13 app router?

I am calling an external API in page.tsx which gives the city of the person. I want to pass this city to the client component where this city can be displayed and changed. What will be the best way to achieve this? In React we can use redux but since this is next.js 13 server component not sure how to do it.

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>
  );
}

Answer 1

You can pass the data as props, you just need to make sure that it is serialized .

for instance

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>
    )
}