Everything You Need to Know About Server Components in Next.js 13
Vložit
- čas přidán 5. 07. 2024
- With the release of Next.js 13, Next.js officially supports React server components, and here's everything you need to know about server components so you can start building better, faster apps right away.
📚 Materials/References:
Code: github.com/CodeSnaps/react-se...
👨🏻💻 Here's what you'll learn:
- What are server components
- The difference between server and client components
- When to use a client or server component
- Best practices for nesting server and client components
- How to use React Context with server components
👇 Timestamps:
00:00 Intro
00:12 What Are Server Components
00:50 Create Server Component
02:06 Client Component
03:09 When to Use Which
05:31 Best Practices (Nesting)
07:00 React Context
08:46 Outro - Věda a technologie
here before this channel blows up
Bro, this a great breakdown of the new features, I've been watching a lot of different videos, and most of them show surface level examples, this video actually goes a bit further which is greatly appreciated!
I appreciate that! Let me know if there are any other topics I should go into more :)
@CodeSnaps maybe you can expand on the api folder and how the route.js works with other page.jsx files in folders. Been trying to wrap my head around the backend.
@@cwhite7002 sounds like a great idea to talk about Route Handlers! Will definitely cover that, thanks for your input :)
amazing video, you def need more subs. Cleared every single doubt I had about the server components paradigm.
Thank you , thank you and thank you. You just completely cleared all of my doubts regarding this topic.
Clearly explained. You have a knack for this. Would like to learn more about powering NextJS and the likes with WASM!
10 mins and my mind is achieved greatness
Thanks for making this.
Very clear Explanation.
You're very welcome! Appreciate it :)
Finally something that we can relate to in the context of Next.js 13.
That really helps man, thanks !
I agree with the rest, this is a good explanation from a good new channel. Would like to see a full Next 13 typescript app build, heck I’d pay for it!
Thank you very much! I'm planning to create full Next.js 13 app builds for this channel. If there are specific tech stacks you'd like to see, let me know :)
I really enjoyed the content of this video. I was searching for some good and fast explanation of client component and server actions and most of the short videos are just talking about surface level stuff or the other videos are more then 30 min long. This is some good explanation and example that is easy to process. Keep this up mate.
Glad you enjoyed it!
Loved the video man, great job!
Glad you enjoyed it!
Amazing Explanation! 👏
Glad to hear it! If there are any other topics you want me to go over, just let me know :)
Very well done! 👏
Thank you so much this is very good !
Glad you like it!
Very nice explanation
helpful video, liked and subscribed!
Thank you so much :)
Well explained👏👏👏
Thank you 🙂
Here before the channel blows up
Thanks, appreciate it!
Great video, just one issue:
You don't need to declare components in the app directory for them to be server components; as long as a component is presented by a page in the app directory, it is automatically a server component unless the 'use client' indicator is used.
Great point! You're right, components can be server components even if they're not in the app directory. Thanks for your input! :)
Thank you.
You're welcome!
Amazing explanation….can you do a video on the difference between server components and server rendered components (SSR)
Sure! That's a great idea, I can definitely go over the difference between SSR and server components. Will add that to my schedule :)
Thank brother
Insta subbed. Nice one
Awesome thank you!
This is golden
Thank you! Glad you liked it :)
Hi, it is a very great and clear video. Thanks for the explanation 🙏
Just one thing, In nextjs docs it shows that ClientComponent (CC) should be inside ServerComponent(SC), and even your explanation that SC is used for fetching data and CC is used for "browserly actions"..
If we put SC inside CC, isn't it an anti-pattern?
I hope I can get your pov/opinion about this cheers 🍻🎉
It's not an anti-pattern because before sending the result to the client, React renders all server components on the server. This includes server components nested within client components. Client components encountered at this stage are skipped. When we nest server components inside client components, React marks them as "slots" that can be filled, and then on the client, React renders the client components. Then, when the client component is loaded, React fills the slot with the correct server component. But with this approach, we still get the benefit of React's server component performance. Basically, Next does a lot of the work in the background for us. Hope that makes sense! :)
@codesnaps so if for example I have an item card with some data inside, fetched from a db, so ideally a server rendered component, and I want it to be selectable when clicked, I could just create a client component selectable and fill the slot with the server component (the data fetched) as prop? It's not mandatory that a chain of components must end with a client component so, right? thanks, great video by the way loved the graphics, time consuming to make but helpful for us
Thank you so much for the clear explanation ! Couldn’t find better explanation !
So if I get it right, I can’t pass data from Client Component to Server component if I nest the Server Component in the Client component using the children property ?
Thank you very much! That's right, you shouldn't pass any data to a server component. This is because React will render all server components first, no matter how deeply nested, before sending them to the client. That's why server components aren't interactive. If you want to pass data, it's best to use client components. However, there are experimental workarounds if you really need server-side mutations. You could use Server Actions, but they are currently in alpha, so I would still recommend designing your components so that only the interactive part is a client component. However, if you need to revalidate stale data, this can still be done via server components. Hope this helps a bit!
@@CodeSnaps Yes I completely got it ! Thanks again for clear explanations ! :)
so if we pass server component as props to client component, it will be rendered on the server?
Yes, exactly, the server component nested inside a client component is guaranteed to render on the server. the client component will render on the client as expected.
The way this works is that React will render all server components first before sending them to the client, and it doesn't matter how deeply nested server components are in client components, React will skip client components during this step.
I hope this helped answer your question :)
😘
6:00
Very interesting BUT isn’t this contradictory with the fact that we are encouraged to have client component only as leaf? 🍃
Client components should be leaves of component trees, but it's perfectly fine to nest server components inside client components with the {children} prop because React props mark them as "slots" that can be filled with server components, for example. Because of this, React will render all server components in advance. Then, when the client component is loaded, React fills the slot with the correct server component. That said, it's still a good idea to keep client components to the leaves whenever possible. Hope this helps! :)
cool video but I can hear mouth noises - if you fixed your audio you would get way more subs. Steal fireships audio setup lol
awesome explaination I just literally searching about this
Thanks a lot, glad to be of help :)