Server Component Effects and Event Handlers

React Server Components render on the server and do not run as interactive components in the browser, so they cannot use browser event handlers such as `onClick` or client-side Effects such as `useEffect`. Put browser interaction and Effects in a Client Component and compose it with Server Components where needed.

A Server Component executes in a server environment and its result is used to construct the UI sent toward the client. Because the component itself is not running in the browser as an interactive JavaScript component, it cannot attach browser event handlers such as `onClick`, `onChange`, or `onSubmit` in the normal Client Component sense.

Server Components also cannot use client-only React Hooks such as `useEffect` or `useLayoutEffect`. These Hooks depend on code executing in the browser after rendering, whereas Server Components are designed for server-side rendering and data access rather than browser lifecycle behavior.

When a component needs interaction, mark the appropriate module with `use client`. That creates a Client Component boundary, allowing event handlers and client Hooks below that boundary. Keep the interactive portion as small as practical so that server-rendered code does not unnecessarily become part of the client bundle.

Server and Client Components can be composed together. A common pattern is for a Server Component to fetch or prepare data and pass serializable props to a Client Component that handles interaction. Server-side functionality such as Server Actions is a separate mechanism: it can let client UI trigger server-side work, but it does not make the Server Component itself an ordinary browser event-handler component.

Key points

• Server Components cannot use browser event handlers such as `onClick` or `onChange`.
• Server Components cannot use client Effects such as `useEffect`.
• `use client` defines a Client Component boundary where browser interactivity and client Hooks are allowed.
• A Server Component can pass appropriate serializable data to a Client Component for interactive behavior.
• Server Actions are distinct from client event handlers and do not make Server Components execute interactively in the browser.

Interview questions

Can a Server Component and a Client Component work together?

Yes. A Server Component can render or compose with Client Components and provide appropriate props to them. This allows server-side data and rendering work to remain on the server while interactive behavior runs on the client. The important boundary is that browser-only behavior belongs in the Client Component.

Why can't a Server Component use `useEffect`?

`useEffect` is a client-side Hook whose callback runs after a component renders in the browser. A Server Component is not executed as an interactive component in the browser. Therefore there is no browser Effect lifecycle for that component. If browser-side synchronization is required, move that logic into a Client Component.

How would you add a button click interaction to a Server Component-based page?

I would keep the page or data-fetching component as a Server Component and extract the interactive button into a Client Component. The Client Component would use `use client` and define the `onClick` handler. The Server Component could pass the button any required serializable props. This keeps the browser-only behavior localized to the client boundary.

What does the `use client` directive actually do?

It marks a module as a Client Component entry point in React Server Component environments that support the directive. Components in that client-side subtree can use browser event handlers and client-only Hooks. It also establishes a boundary between server-oriented and client-oriented component code. The directive does not mean that every component in an application must run on the client.

Are Server Actions a way to put event handlers inside Server Components?

No. Server Actions and browser event handlers solve different parts of the interaction model. A browser event handler executes client-side code in response to an interaction, while a Server Action represents server-side work that can be invoked through supported mechanisms. A Client Component can therefore handle interaction and invoke server-side functionality without turning the Server Component itself into a browser-interactive component.