This Shouldn't Work But It Does🤔

"use client"

type Todo = {
  userId: number
  id: number
  title: string
  completed: boolean
}
async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1")
  if (!res.ok) throw new Error("failed to fetch")
  return res.json() as Promise<Todo>
}

export async function AsyncClient() {
  const todo = await getData()
  console.log(todo) //this gets logged to client
  return (
    <div className="flex flex-col gap-3 border p-3">
      Async Client Component
      <button className="border" onClick={() => console.log("clicked")}>
        Button
      </button>
      Todo: {todo.id}
    </div>
  )
}