Next.js Discord

Discord Forum

client componet inside a server component

Answered
Ashi posted this in #help-forum
Open in Discord
AshiOP
first time using nextjs, how do i pass server side data to client side i currently having this error

home
import InputForm from "@/components/InputForm";
import TodoList from "@/components/TodoList";

import { getTodos } from "@/lib/actions";

const Home = async () => {

  const todos = await getTodos()

  return (
    <div className="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden mt-16">
      <InputForm />
      <TodoList initialTodos={todos} />
    </div>
  );
};

export default Home;

Todolist
"use client"

import { useEffect, useState } from "react";
import Todo from "./Todo";
import { type TodoType } from "@/types/todo";

const TodoList = async ({ initialTodos }: { initialTodos: TodoType[] }) => {
  const [todos, setTodos] = useState<TodoType[]>(initialTodos);

  useEffect(() => {
    setTodos(initialTodos);
  }, [initialTodos]);

  return (
    <ul className="divide-y divide-gray-200 px-4">
      {todos?.map((t: any) => (
        <Todo key={t.id} {...t} />
      ))}
    </ul>
  );
};

export default TodoList;
Answered by Swainson's Warbler
Hey Ashi, the issue is about where async is allowed in Next.js..

Home is a server component by default (since it lives in the app/ directory and doesn’t have "use client" at the top). That means it can be async and safely fetch data like this:

const Home = async () => {
  const todos = await getTodos(); 
  return <TodoList initialTodos={todos} />;
};


TodoList, on the other hand, is marked "use client", so it runs in the browser. Client components must be synchronous — React expects them to return JSX immediately. Making TodoList async breaks that expectation and causes errors.

You’re already passing initialTodos as props from the server, so you don’t need async in TodoList. In general, async is great in server components, route handlers, or hooks — but not in client component bodies.

If you're ever unsure, ask:

Am I trying to fetch data before rendering? → If yes, and you're in a server component, async is perfect. → If you're in a client component, use props or useEffect.
View full answer

2 Replies

Swainson's Warbler
Hey Ashi, the issue is about where async is allowed in Next.js..

Home is a server component by default (since it lives in the app/ directory and doesn’t have "use client" at the top). That means it can be async and safely fetch data like this:

const Home = async () => {
  const todos = await getTodos(); 
  return <TodoList initialTodos={todos} />;
};


TodoList, on the other hand, is marked "use client", so it runs in the browser. Client components must be synchronous — React expects them to return JSX immediately. Making TodoList async breaks that expectation and causes errors.

You’re already passing initialTodos as props from the server, so you don’t need async in TodoList. In general, async is great in server components, route handlers, or hooks — but not in client component bodies.

If you're ever unsure, ask:

Am I trying to fetch data before rendering? → If yes, and you're in a server component, async is perfect. → If you're in a client component, use props or useEffect.
Answer