Components vs Client Components
Answered
Bengal posted this in #help-forum
BengalOP
I'm learning Next.js and trying to understand when to use Server Components vs Client Components.
Can someone explain how they decide in real projects?
Can someone explain how they decide in real projects?
Answered by B33fb0n3
ask yourself: does my component needs to be interactive?
Yes: client component
No: server component
Yes: client component
No: server component
6 Replies
@Bengal I'm learning Next.js and trying to understand when to use Server Components vs Client Components.
Can someone explain how they decide in real projects?
ask yourself: does my component needs to be interactive?
Yes: client component
No: server component
Yes: client component
No: server component
Answer
@Bengal solved?
BengalOP
Yes bro
happy to help
Spectacled Caiman
Not only interactivity but if
component needs browser-only features (hooks, event handlers, window, document, localStorage, etc.)
Yes → Client Component
No → Server Component (default)
component needs browser-only features (hooks, event handlers, window, document, localStorage, etc.)
Yes → Client Component
No → Server Component (default)
Selkirk Rex
TL/DR: Client components execute in browser context (again), server components don't!
Basically the main difference is what is happening after rendering.
Server components result in plain html without any javascript bundle (none of the libs used by a server component will be sent to the browser)
Client components also render serverside, but are being hydrated clientside. Means, they render again in the browser to let React take control of.
Basically the main difference is what is happening after rendering.
Server components result in plain html without any javascript bundle (none of the libs used by a server component will be sent to the browser)
Client components also render serverside, but are being hydrated clientside. Means, they render again in the browser to let React take control of.