Is it okay to fetch server side and pass the data to a client component?

Unanswered

Amur catfish posted this in #help-forum

Amur catfishOP

2024-01-15T16:15:57.000Z

Hi, i have a question.

I was thinking about fetching data (lets say a list of users) in a server component. What happens if I want to edit/add/delete a user?

I come from react where I simply store the data in a state and modifying it would re render the component.

What if I fetch the data server side and pass it to a client component where I actually add it to a state and work from there?

13 Replies

@Amur catfish Hi, i have a question. I was thinking about fetching data (lets say a list of users) in a server component. What happens if I want to edit/add/delete a user? I come from react where I simply store the data in a state and modifying it would re render the component. What if I fetch the data server side and pass it to a client component where I actually add it to a state and work from there?

Ray

2024-01-15T16:21:34.000Z

for the crud operation, I don't think you need to store the data in client state?

// todos/page.tsx
export default async function TodosPage() {
    const todos = await getTodos()

    return <div>...</div>
}

// todos/create/page.tsx
export default async function CreateTodoPage() {
  return <form action={createTodo}></form>
}

// todos/[id]/edit/page.tsx
export default async function EditTodPage({params}: {params: {id:string}}) {
  const todo = await getTodoById(params.id)

  return <div>...</div>
}

// todos/[id]/delete/page.ts
export default async function DeleteTodoPage({params}: {params: {id:string}}) {
  return <form action={deleteTodo}></form>
}