Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
KingKorai

This Shouldn't Work But It Does🤔

https://github.com/Apestein/async-client-demo/tree/main

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


This is an async client component, this should not work and yet it does. The console.log will show up on client. It will not let you use useState but onClick will work.
If you do export default async function instead then it will give you an error as expected but export async function will work.
Was this page helpful?