// app/page.js — a Server Component (no "use client" needed)

async function HomePage() {
  const jokes = await fetch("https://official-joke-api.appspot.com/jokes/ten").then((r) =>
    r.json()
  );

  return (
    <ul>
      {jokes.map((joke) => (
        <li key={joke.id}>{joke.setup}</li>
      ))}
    </ul>
  );
}

export default HomePage;

/*
  Notes:
  - HomePage is an async function — Server Components are allowed to
    be async directly, unlike a regular client-rendered component.
  - There is no useState, no useEffect, no loading/error state at
    all — by the time this HTML reaches the browser, the data has
    already been fetched and rendered on the server.
  - None of this component's code (including the fetch logic) is
    shipped to the browser as JavaScript at all.
*/