CSR vs SSR
Unanswered
Saint-Usuge Spaniel posted this in #help-forum
Saint-Usuge SpanielOP
I am a newbie and a bit confused as to when to utilise 'use client' / 'use server'.
If my understanding is correct, NextJs by default pre-renders a component the server, and then somehow re-hydrates it so it behaves 'like' a vanilla JS on the client. Also, I thought (wrongly?) that any page that doesn't export getServerSideProps or getStaticProps will use CSR ... so there is no real reason to be explicit about using CSR, we just don't make use of getServerSideProps or getStaticProps ...
if the above is correct, when would I need to utilise 'use client' ?
If my understanding is correct, NextJs by default pre-renders a component the server, and then somehow re-hydrates it so it behaves 'like' a vanilla JS on the client. Also, I thought (wrongly?) that any page that doesn't export getServerSideProps or getStaticProps will use CSR ... so there is no real reason to be explicit about using CSR, we just don't make use of getServerSideProps or getStaticProps ...
if the above is correct, when would I need to utilise 'use client' ?
5 Replies
You use
use client (client component) when you want to add interactivity (ie button) and [use server is actually for server actions](https://github.com/vercel/next.js/pull/55188).NextJs by default pre-renders a component the server, and then somehow re-hydrates it so it behaves 'like' a vanilla JS on the client.yes, everything is pretendered, even if client component
use server is not the opposite of use client@riský > NextJs by default pre-renders a component the server, and then somehow re-hydrates it so it behaves 'like' a vanilla JS on the client.
yes, everything is pretendered, even if client component
Saint-Usuge SpanielOP
but wouldn't my component in a way had already supported interactivity on the client (even without my explicit usage of 'use client'), since it would have been rehydrated with the any JS needed for that after hydration ?
just wondering, do you know what server components are in nextjs 13?