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

Bobstay

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

Archival

Actually, the Location component is not a child component. To implement above solution I need to call the API in RootLayout and then need to pass it down to Location component by props drilling. Is there any other solution to do it a better way? – Bobstay

You can also use a context api ( to avoid props drilling) – Obsession

The React context API is not available in React server components. nextjs.org/docs/messages/context-in-server-component – Ewen

Answer 2

It's not currently possible with hooks. There used to be an experimental hook named useActionState that returned functions equivalent to [state, setState], where state and setState could be passed to child client components as props, but it did not work properly and has been removed from the documentation. Hopefully the Next.js team finds a way to fix it, because it's essential functionality for a full stack framework.

For now, I believe that you'll need to set up a Route Handler and then call it from the frontend with fetch(), as you would with a separate frontend and backend.

Ewen