Your App architecture with Client & Server Components

Hey friend,

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.

Our Weekly Snack: How to Architect your Server & Client Components 🍿

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! 💪

Weekly Youtube Videos 💖

Master this skill once and watch your career skyrocket 🚀 ​

You didn't know these facts about Server Components 🫢 ​

​

The Frontend Developers Toolbox 🧰

• Create scroll-driven micro animations, a very cool demo ↗️​
• ​Create a PR with one click in CodeSandbox (one of my favourite developer environments)
• Fill out the State of React Native Survey and give your thoughts and your experience with it.

Did you like today's edition of Frontend Snacks? If you did or didn't, please vote below and let me know!

​🔥 Loved it | 😐 Not bad | 👎 You can make it better​

​

I hope you have a great day!

P.S.