client side code along with server side

[crystal fossil]

Hi,
I'm really new to the next ecosystem though
I've been doing react dev for a while now and recently nextjs has peeked my interest.
Now i know we can code client side components and server side components separately but what if i want to have both in the same component does nextjs pattern allow it or theres no need for it in the first place?
Lets say you've a quora like question page, while i want my data to be pre rendered on the server i also want some functionality like when other users answer on that page the question data gets dynamically updated(via react query maybe) instead of reloading the whole page.

[olive shell]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[gaunt zenith]

code client side components and server side components
there are no client side components and server side components.
only client components and server components.

i want to have both in the same component does nextjs pattern allow it or theres no need for it in the first place?
Yes. See the next.js docs about "Composition Pattern" in rendering

Lets say you've a quora like question page, while i want my data to be pre rendered on the server i also want some functionality like when other users answer on that page the question data gets dynamically updated(via react query maybe) instead of reloading the whole page.
Very possible

[crystal fossil]

Is there any tutorial, blog or article to address that.
I'm confused about the dynamic part. How's the dynamic part rendered prerendered from server but is still dynamic on client side (using react query or SWR)

[gaunt zenith]

Using client components, the initial state of the component are rendered in the server. Then, any extra javascript is hydrated on the client

making it possible to have an initial value which can be updated later in the runtime

[royal topaz]

Client components work basically the same as the SSR does on everything in the /pages router version of Next. So just normal React SSR with hydration.

Server components are HTML/DOM that is sent to the client, but the client has logic to kind of ignore it instead of hyrating it