Two kinds of components

Every rendering decision in Next.js starts with one question: does this piece need the browser? If not, it stays on the server and ships no JavaScript at all.

• Server Components (the default) run on the server or at build time. They can be async, query a database and read secrets. Their code never ships to the browser.
• Client Components start with "use client". They can use useState, useEffect, event handlers like onClick, and browser APIs like window.
• Server Components can't use state, effects or event handlers: there's no browser where they run.