I have some good news. 🔥
I am halfway through monetization with YouTube and have crossed 1k subscribers on my channel. This is exciting. 😊 Thank you so much for watching my videos and your support!
You commenting and sharing your thoughts in my newsletter or videos means the world to me. So always hit reply if you need anything, okay? Deal!
Today, we will learn how to architect your components better with server and client components.
It's a tricky topic; you must change your mental model. But with practice, you will get there.
Let's dive right in.
By design, components in Next.js default to being Server components.
Let's say this is the app you want to build. It has a button with some title and a bunch of Card components underneath it.
This means this is how your application tree would look like.
Now, the Button has click handlers, and the Card does not need any interactivity. Hence, a Card can be a Server Component. But, for the button to work correctly, you must make the Page a Client component.
Something like this,
❌ But you break the rules of using Server and Client components together. Plus, this defeats the purpose of using Server Components.
Page, being the topmost root parent, will make all its children client components.
But if you remove the button logic and code and move it into its own component, then the Button now becomes a Client component, and we are aligned with another rule of Server components.
Our app architecture now looks like this, which works as intended.
Now, there is more I couldn't cover in this newsletter, but I plan to share a YouTube video on the same topic.
So, Ssshh, don't tell anyone yet 🤫; I'll release that video tomorrow.
So subscribe? Yeah? >>>> click here! 💪
Did you like today's edition of Frontend Snacks? If you did or didn't, please vote below and let me know!
I hope you have a great day!