Not really, it's just that hooks are clientside because state on a server would be via a session or db query and an effect would just be an asyc await.

There's a bunch of code that still needs to be rendered with use client and utilize hooks, eg sortable lists or sidebars listening to scroll position

I did not understand a single thing

Thanks

Hold on… I think you’re right?

I thought use client was part of nextjs and not a way around

use client is part of react :''

Zang

What else

Btw I have a question, is importning a server component to a client component makes the server component a client component? But not the otherway?

yes but not the other way

its just react stuff haha

Aight, Thanks.

importing client component to a server component wont make the clietn comp a server comp but will prerender client comp in the server

for the initial HTML element

Okay but then still hydrates in the client right

yepp

okk

But is it a bad thing to do this?

But i feel like the code is a bit messy if we pass it as props.

yes in layman term its baaadd

but noone is stopping you :P

pass it as children or prop

well then my code is messy haha

So in conclusion, Server component can be made of server and client component and for client component can only be made of client component (to use server component must pass it as props to save performance?)

yep

more or less

Okay.

So this means I can convert a react component in a next.js server component just by using "use client"?

It's sooo confusing

because you're spliting the client and the page itself

which the page cannot be anything else but a server component

so you cannot put a "use client" on a page.tsx

Yeep

Just make a client component

Create a new file

okay but what if my component has event handlers?

Do I make another component in addition of my client component just for handling cases?

Top level components should almost never be client components. it takes a lot of getting used to, but think of components as server components by default, as they are. Client components are only small 'leaves' in the react tree that are necessary for anything that has an event handler or interactivity involving some react hook.

Here is a good article that helped me understand it a bit more
https://nextjs.org/docs/getting-started/react-essentials#thinking-in-server-components

buttons, forms, inputs, toggles, and small interactive pieces should be client components, and everything else should be server components.

This doesn't mean you have to use server component functionality in every server component, you are just letting react/nextjs handle rendering that component on the server and saving some time with render.

Thanks

I'm just trying to see how to change all the logic in my app. What to put as Hooks, what to put as Modals and the logic behind these as well