This is a good point, I believe that in this example the sidebar isn't actually interactive because the links in the sidebar will likely use the Next Link component. Although links can use onClick, in this example using for those sidebar links would make more sense.
Hi, great explanation! It'd be really appreciated if you could demonstrate the differences in user experience for both cases - without SSR components v/s with SSR components, because a real-life demo would help a lot in understanding the differences. Thank you for making such amazing content!
Hi, I am also trying to understand concept of client components and server component but I have a one question. Even if I use "use client" mark at the top of the component, that component is also rendered on the server? Am I right. I mean, when I check the network tab I can also see that client component. Also, when I write a console.log outside of the useEffect and inside a component which has "use client" at the top, I can see that console.log both on the server and client. Does every component is pre-rendered on the server first even if there is a "use client" mark (Client Component) ?
The way I understand it is that your console.log is still included in the pre-built and built files. A file is requested, it returns the needed resource but also includes to run your console.log.. Either that or dev environment have different compilation which I assume you are on dev mode.
Good question! This guy explains it better than I could in a YT comment, take a look: dev.to/nas5w/what-is-the-difference-between-server-side-rendering-ssr-and-react-server-components-5339
I'm confused about the example, the list (the one with the thumbnails) was tagged as server side, but what if those are a list that will change when the user put a keyword on the search input.
Hey mb on late response, I see what you're saying. In that example the search bar is more of like Google search so it isn't going to change the thumbnails under it based off of text input. The search bar itself needs to save the text of the search, and also listen for when the user presses enter, these are both client side operations so that is why it is client side. Hopefully this helps.
@@CooperCodeshi I have a page with multiple posts. I want to filter filter posts and fetch new posts based on the user's wish. Should I fetch in client component or server component. I also want to fetch and append more posts as the user scrolls down
I understand what they are. I understand when to use either of them because it's obvious. But I don't understand HOW to use them, and you forgot to include that part...
Instead of rendering 5s of js on the client you will now be rendering 5s of js on the server! Increasing your server costs to speed up the client by WHOLE 5seconds!!!!!!!!!!!!!!!!!!
Thanks, for this really easy-to-understand and straightforward explanation.
Isn’t the sidebar interactive as well? Definitely uses onClick
This is a good point, I believe that in this example the sidebar isn't actually interactive because the links in the sidebar will likely use the Next Link component. Although links can use onClick, in this example using for those sidebar links would make more sense.
Hi, great explanation! It'd be really appreciated if you could demonstrate the differences in user experience for both cases - without SSR components v/s with SSR components, because a real-life demo would help a lot in understanding the differences. Thank you for making such amazing content!
I would like to see a video like this, too!
This video inspired my "ah hah" moment. Now I get the bigger picture. Thanks!
Hi, I am also trying to understand concept of client components and server component but I have a one question. Even if I use "use client" mark at the top of the component, that component is also rendered on the server? Am I right. I mean, when I check the network tab I can also see that client component. Also, when I write a console.log outside of the useEffect and inside a component which has "use client" at the top, I can see that console.log both on the server and client. Does every component is pre-rendered on the server first even if there is a "use client" mark (Client Component) ?
The way I understand it is that your console.log is still included in the pre-built and built files. A file is requested, it returns the needed resource but also includes to run your console.log..
Either that or dev environment have different compilation which I assume you are on dev mode.
Thanks, what is the difference between SSR and Server Component?
Good question! This guy explains it better than I could in a YT comment, take a look: dev.to/nas5w/what-is-the-difference-between-server-side-rendering-ssr-and-react-server-components-5339
Best explanation so far, thanks!
Great video thank you. can you make video about "prop classname did not match"? I'm stuck using nextjs and material ui with this error.
great explanation! thanks for the content!
You are very welcome. Thanks for watching :)
I'm confused about the example, the list (the one with the thumbnails) was tagged as server side, but what if those are a list that will change when the user put a keyword on the search input.
Hey mb on late response, I see what you're saying. In that example the search bar is more of like Google search so it isn't going to change the thumbnails under it based off of text input. The search bar itself needs to save the text of the search, and also listen for when the user presses enter, these are both client side operations so that is why it is client side. Hopefully this helps.
@@CooperCodeshi I have a page with multiple posts. I want to filter filter posts and fetch new posts based on the user's wish. Should I fetch in client component or server component. I also want to fetch and append more posts as the user scrolls down
Amazing explanation, thank you so much!
Great simple overview. Thank you!
Great video man!
Appreciate it Justin!
best explanation, thanks!
amazing explanation
Great job dude 🎉 tks
You are welcome, thanks for watching :)
Amazing content!
no how implement? client component can use "use client", and then how to convert to server component for its subcomponent
Great video but code samples for both would have been nice.
What I wasn't sure of css effects
I understand what they are. I understand when to use either of them because it's obvious. But I don't understand HOW to use them, and you forgot to include that part...
try putting
"use Client";
On the top of everything
And it can solve your problem
Awesome
Nice
Great video! I would appreciate to have small project tutorials using T3 full stack. Thank you
Thank you! I will get into T3 full stack videos soon. Thanks for the comment :)
Instead of rendering 5s of js on the client you will now be rendering 5s of js on the server! Increasing your server costs to speed up the client by WHOLE 5seconds!!!!!!!!!!!!!!!!!!
Yea, not that complicated