client side code along with server side
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
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.
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.
7 Replies
code client side components and server side componentsthere 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
Sloth bearOP
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)
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)
@Sloth bear 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)
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
@Sloth bear 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)
Asian black bear
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
Importing any component into a file that is marked
use client makes it into a use client component as well (even if it is supposed to be a server component), but server components can pass through client ones in {children}