Suggestion for using server vs client component
Unanswered
Rojoss posted this in #help-forum
RojossOP
Hi, I'm quite new to SSR and I'm wondering which approach is better and why? It's just a simple example to help me understand it better I basically just have a edit button on a page and when I click it I want to show the editor for the page.
1. Wrap the entire page in a client component, then use state and when you click button set state so component is re-rendered with the editor instead of content.
2. Keep the page server rendered and redirect the user to page/?editing=true and then check for params when rendering the component if editing param is passed then render editor instead of the page.
So basically my question is if it's better to do redirects and keep things on the server or does it make more sense to use client side components and state?
1. Wrap the entire page in a client component, then use state and when you click button set state so component is re-rendered with the editor instead of content.
2. Keep the page server rendered and redirect the user to page/?editing=true and then check for params when rendering the component if editing param is passed then render editor instead of the page.
So basically my question is if it's better to do redirects and keep things on the server or does it make more sense to use client side components and state?
18 Replies
American Chinchilla
That’s a good question, im curious to know the answer too.
RojossOP
Any particular reason why that's better?
I basically change the entire page when you click the button so it also makes sense to me to render the whole page again on the server with a redirect but might not be the most elegant.
I basically change the entire page when you click the button so it also makes sense to me to render the whole page again on the server with a redirect but might not be the most elegant.
@Rojoss Hi, I'm quite new to SSR and I'm wondering which approach is better and why? It's just a simple example to help me understand it better I basically just have a edit button on a page and when I click it I want to show the editor for the page.
1. Wrap the entire page in a client component, then use state and when you click button set state so component is re-rendered with the editor instead of content.
2. Keep the page server rendered and redirect the user to page/?editing=true and then check for params when rendering the component if editing param is passed then render editor instead of the page.
So basically my question is if it's better to do redirects and keep things on the server or does it make more sense to use client side components and state?
You can do it like most of the editors do it: add a overlay to it, that is 100% dynamic and that will be clientside. The preview/page itself is then 100% server side rendered
RojossOP
So that's basically approach 1 right by using state and client side components
or am I not understanding it?
@Rojoss So that's basically approach 1 right by using state and client side components
It is a mix of both pros and deletes both cons
RojossOP
Hmm I'm not understanding what you mean then
so what happens when you click the edit button?
@Rojoss so what happens when you click the edit button?
then the overlay blend in
RojossOP
but that would require client side component right to use state?
RojossOP
yeah so approach 1 then to render the editor when state changes when you click the button
@Rojoss yeah so approach 1 then to render the editor when state changes when you click the button
yes and it takes the SSR part from 2. with it. The preview/page itself is SSR and the editor is full clientside
RojossOP
Hmm alright
This might be interesting for you: https://nextjs-forum.com/post/1246500950345252924#message-1246500950345252924
RojossOP
Thanks! will give it a read
@Rojoss solved?