Are React client components bad?

our react client components a Bad Thing should you only be using react server components the answer is no they're not a bad thing and I'd like to explain a little bit more about why this is so for the folks who watch my channel you know that I lead the next JS community over at Purcell and this is a question that I've got quite a few times should I be using client or server components so let me start off with a little backstory the next GS team has been working on integrating the latest react features for well over a year now including server components suspense for Server rendering transition streaming and a whole bunch more and along that Journey we've progressively released new updates on our progress so this started about a year ago now with our layouts RFC talking about the new changes we'd proposed for routing and layouts inside of nexgs and then progress a little bit further in October when we had our next GS conference and we released the app router in beta now the release of the app router in beta was the first time a lot of folks in the next.js and react Community had actually had a chance to explore using server and client components so with that comes a lot of opportunity for education and to be honest a little bit of stumbling over new patterns which prompted a lot of questions should I be using server components all the time when should I use client components and how do these things mixed together when something new is released hopefully you're excited about it and you want to see how you can actually bring this back to your application and use it and I think we probably could have done a better job about explaining when and where to use server and client components so in case you have it read up on them very much yet server components can be useful for fetching data from your database or fetching data from a remote location and then sending some information back from the server some HTML and client components are all of the react that you know and love today or the next JS and the pages router that you know and love today so all of the libraries and all the packages and the entire react ecosystem all continues to work as is inside of the client components world now with a new ecosystem in server components and with new features being added like server actions there's a lot of opportunity for a really awesome new things but it has to wait for the ecosystem to adopt and learn and catch up to these new features so if you're feeling right now like wow these are really exciting but maybe there isn't this vast ecosystem of packages yet or a vast ecosystem of tutorials or YouTube videos to help you learn that's expected and that's okay it's going to take a little bit of time to get there but I think the important thing to understand is that client components aren't bad and you shouldn't feel like you have to use server components the entire architecture of the Nexus app router was designed to be incrementally adopted so you can move to the latest version of next.js today and keep using the entire Pages router if you'd like if you want to move maybe one route over to the app router you can and you can move that over and make the entry point a client component if you wanted to which again functions the same way as the pages router so you can really take the this adoption at the speed that you want as you're learning some of these new patterns and also as the ecosystem is growing another helpful way of thinking about the next JS app router and the server components Foundation that it builds on is it's taking some really great ideas in the ecosystem even from nextges itself and just integrating them back into this new router so for example rather than needing to use it get server-side props or get static props these next.js apis you can just Mark a server component as asynchronous and await some data and fetching and caching and deduplicating it's all built into the actual router itself including actually mutating and revalidating data with really helpful functions so we've taken a lot of the patterns that we've seen really large applications and small applications use and try to bring that back into the library and that's cool and that's exciting but that also doesn't mean that you have to learn it on day one or rewrite your entire application or move all of your client components and server components I don't want that what I want is that people can progressively adopt these things as they're ready as they're comfortable and hopefully contribute back to the ecosystem with new packages or new libraries all right that's all for now hopefully that helps answer the question of if it's okay to use react client components stay tuned for the next one peace

Channel: Lee Robinson

Views: 28,634

Keywords:

Id: 6jM_0wDOw4g

Length: 4min 21sec (261 seconds)

Published: Sun Jun 18 2023