In Next.js 13, Why can't I use eventhandler in server component?

Question

In the next.js 13 docs, it says that event handlers cannot be used in server components, but I wonder why. and Why are react hooks not available?

Answer 1

On the server, there are no user interactions. events are fired based on user interactions. That is why if a component has a button, it should be a client component because someone has to click on that button.

React hooks are related to the browser. they are basically a system that tells browsers when to recalculate certain computations or when to rerender the component based on dependencies. So based on user interactions, your app state will change, and based on this browser has to show the user new interface.

Answer 2

They can be enabled but you have to add on top of the page 'use client'. Then page will become client side not server side.

Answer 3

if you want to use event handlers you have to add 'use client'; at the top of your component file because the node.js server that renders the server components for create static version of your app knows nothing about browser APIs like DOM .