React Server Components Change Everything

if you've ever written any react code you know the pain that is this left side pain with all these long use effects with fetch request and State Management other complicated stuff just to be able to fetch data to render your actual page now this is luckily going to be a thing of the past with the new ideology of server components which react is really pushing which allows you to write this really simple file you see on the right hand side here which uses modern JavaScript Concepts and completely replaces everything you see on the left in a much simpler way so in this video I'm going to explain exactly what server components are and compare them to client components inside of react welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and today I really want to talk all about client versus server components now if you've heard about client and server components before you may think that they are a nextjs feature but actually client and server components specifically are actually a react feature and nextjs just happens to implement them in their own nextjs specific way now in this video I'm going to be using server components in the ideology of nextjs and within a nextjs project as you can see over here on the left side side of my screen but in the future this is something that you can use in many different frontend Frameworks but right now nextjs has the most robust support for Server components also if you prefer a written tutorial I have a full blog article on this exact same topic I'll link in the description below for you there's over 100 articles on that blog so I'd highly recommend checking it out now the entire idea behind server components is that generally with component you need to run all of your code on the client it all renders on the client which means you need to do these really long and convoluted use effects in order to get all the data you want from some other API so now you need to develop an API and a front end and it gets rather complicated the idea behind server components is we can just run our code on the server which means we can directly do fetch request in line and then just return the data that we want instead of doing this thing where we send down HTML in JavaScript and then do another request to the API and then get that data where we have this like two-step process server components does this all in one step and the way that this works is that server components run only on the server they never run on the client at all this is really easy to see if we just come in here and we put a simple console log that says server and then up here we're going to put a simple console log that says client and we can see exactly where we see these different console logs so I'm going to refresh my page over here and this is on the client page and if I inspect my page and I go over to the console you can see that it's printing out client a bunch of times inside of my log you can see right here now if I go over to my server page and I just refresh this a bunch of times you'll notice nothing is being printed out inside of the console right here but if I open up the console for my actual project you'll notice that if I refresh this page every single time you can see it's printing out server and that means that this server component is running only on the server and again if I inspect the page and look at it on the client you'll notice no matter how many times I refresh nothing shows up in that console the one interesting thing you'll notice though is when I navigate to my client page nothing actually renders but when I do a hard Refresh on this page it does actually render my client component on the server this is something specific to how nextjs implements client components and that the first time that you hard navigate to ones for example you load up a page that's a client component it's going to run that on the server for SEO specific purposes but again this is a nextjs specific feature and not something related to react so this is the big difference between these two components by guaranteeing that our server component never actually runs on the client we can do a few really interesting things the very first thing is that we can actually make this an async component as you can see here I've made this an async function which means I can just directly await my fetch request or database request or anything else that is timec consuming inside of here and I can just make sure I render out my code afterwards so I don't have to worry about loading States error States doing my use effects for my fetches State Management all of that is handled by just a simple async weight just like you would do in any normal JavaScript code and this makes it much more aligned with normal JavaScript and it makes the actual process of understanding the code and reading it much easier now you can still handle loading and error States doing that in nextjs you just need to create essentially a loading file inside of here or you would create an error file and if you want to learn more about the nextjs specific ways of handling those things I have a full crash course video on nextjs I'll link in the cards and description for you but for the purposes of this video that doesn't really matter because we're really focusing on server components themselves so the benefits of doing all this just on the server means that you have extra levels of security and that's because none of the code inside my server component that relies on things like database calls or certain API credentials will actually be passed down to the client for example if inside of this fetch request I needed to pass along some really sensitive API information I could come in here and let's just say that I have something that I pass along in like the body and that body is just going to be like secret data and I pass it along whatever my secret data is now this secret data is not ever going to be seen on the client of my page and that's because all of this code runs in the server and the only thing that actually get sent down to the client is whatever I return inside of here so it just sends down raw HTML and it doesn't actually send down the code to actually do those fetch requests that means if I wanted to replace this with for example like db. to.get or some other way to actually get my to-dos from a database I could do this instead as well and all of my database credentials and everything like that stays on the server and the client only gets the actual information that's returned from it so whatever these to-dos are and whatever this HTML down here is the next massive benefit to server components is going to be Performance Based and there's actually three different ways that it improves the performance of your application we'll just bring this back to where we had our fetching before we'll get rid of all this secret data stuff just so we have code that's actually working and one giant thing that we can do which is really nice is we can do some caching nextjs has a bunch of caching by default but even without nextjs you can do caching on your own and since this cache lives on your server that means it's available to every single user that accesses your website so that means that you can directly cast whatever HTML this page needs based on my to-dos and every single user that accesses my page will be able to access that same cach which means it's going to be incredibly quick for all of them if you're using a client component and you wanted to cash something on the client it would only be cash for that one individual user so instead you would need to do your caching at the API level so making your cash wherever your fetch request is requested from and then you essentially send down some blank HTML they then need to make a request to that cache and get the information while in the case of here where we have a server component we're doing everything inside of one single step which means instead of sending down raw blank information and then doing a fetch request all we're doing is we're just sending down the HTML it's just one single process now the next great thing is going to be that with server components if you have code that is running on your server and imported from like libraries for example that are really massive that code is only going to live on your server which means the bundle size of your JavaScript that gets sent to the client is much smaller let's for example take a look at this Library let's say we have a really big file in here obviously it's not very big but imagine this is a massive Library that's like 3 or 4 megabytes of code it's huge and we want to use that inside of our server and client component so I'm I'm going to come in here and I'm going to import that function I just called it big Funk there we go so we're importing that into here and we're going to do the exact same thing inside of our client just like that now if I were to go to my client page and I actually inspect what this looks like make sure I refresh what this page is and you'll notice if I go over to my source code and I look through my source code for example I just do a control shift F to actually search for that big Funk and I search you notice all over in my code I find this big Funk because that is inside of the code that's being outputed for my client component now if I go ahead and I go to my server page instead and I do a quick hard refresh and I do that exact same search so I go to the source I search for big Funk and I click search no matches found and that's because this code is being only run on the server which means all this import for this giant file never actually makes it to the client which drastically reduces the amount of code I sent to the client while when I'm using a client component the normal react way of doing things everything I import inside of here actually needs to get sent to the client and then the last performance gain is probably the the most obvious and that is just generally your page is going to load faster and that's because instead of sending down my client component and then making a fetch request and then processing all that information on the client I'm doing all of that in one step on the server the client makes a request the server makes that Fetch and it sends down one set of HTML which has all of my data so you never have to worry about having incomplete data on the client and different things like that you just have everything sent down immediately which is really nice and it's generally going to be quicker now the final big benefit to server components over client components is that server components are generally going to be better at SEO the reason for that is because it's going to be sending down actual HTML that is fully populated with all of your information while a client component on the other hand is going to be sending down partially implemented HTML and then it needs to use things like a use effect to actually fill in the rest of that information now obviously search engines have gotten better at dealing with this and you can do certain server rendering tools inside of react but with server components all of this is super easy and automatically baked in for you now of all these amazing benefits you may just think why not make everything a server component and the reason you can't do that is because since your code never runs on the client you have no way to add interactivity to the page for example let's just say I wanted to add an onclick event listener onto here I could say onclick console.log high there we go and immediately I'm getting a bunch of different errors and that's because I can't do interactivity I can't have onclick event listeners or any other style of event listener I can't use for example a use effect hook so here we go if I add in the use effect hook there we go and I just try to make this run immediately if I try to import that effect from react and I give that a save I'm again going to get an error because I can't use use effect I can't use like use State you pretty much can't use any hook at all inside of a server component and that's again because you cannot do interactivity so it's really important that if you have any type of interactivity on your page that must go inside of a client component but because of the amazing benefits you get with server components generally what I try to do is make as many of my components as possible server components and then only the few places where I actually need interactivity do I use client components and I just make sure all the data I need for example any to-dos I need to fetch for example come from a server component and get passed into that client component as like a prop like this the other big downside since your server component never actually renders on the Cent you can't use things like local storage or anything else that is inside the window object because this just obviously does not exist in the server environment and it never runs on the client so things like local storage the Navigator or any other browser based API you cannot use inside of a server component those are pretty much all of the downsides of server components though the only other thing that's important to talk about is how do you Nest server components and client components because right now if I wanted to inside my server component I could come down here and I could render out some typ type of client component it doesn't matter what it is and it's going to work just fine all of this code is going to be rendered on the server and then this specific component that is a client component will be rendered on the client now the way that you specify a component is a client component in nextjs at least is you just add this string use client at the very top of the file and that's the nextjs way of saying that this is going to be a client component so I can put client components inside server components with no problem at all but as soon as I have a client component for example I have a client component like this all of the children of this component are also going to be client components no matter what even if I didn't mark them as a client component they will be rendered only on the client and not on the server so you essentially get one chance to go from server to client and you can never go back after that for example in this client component I could never render a server component and that's because I've already jumped over to the client so I no longer am able to go back to the server it's essentially a oneway pass but there is one way that you can get around this to show you what I'm I'm talking about I'm just going to create a brand new file so we'll put it in this components folder we'll create this file and we'll call it client. TSX export function client just like that and this is return an H1 that says client so we know that this renders on the client and inside of here I'm just going to drastically simplify this by rendering out that client component and the important thing inside of here is I'm going to make sure that this runs on the client by putting use client at the very top so now this code is rendering on the client and this code is rendering on the server which means if I put a console login here that says client you'll notice when we inspect and we go over to our console you can see it's printing out client right there so from this point onward everything inside of here is going to be a client component and even if I render another component this component is also going to be rendered on the client but what happens if I want to render something inside of the server and I want to render it inside this component well what I would need to do is actually pass it in as a prop from a server component so let me create another component inside of here I'll call this one server. TSX so we're going we going to export function server and this is pretty much going to look exactly the same I'll just copy this code paste it inside of there and I'll change this to say server instead of client so you will notice immediately if I refresh my page and I actually render this component inside of here there we go make sure I import that component give it a quick save you can see we have our client and server being rendered and crucially since this client component is being rendered on the client every inside of it including this component we called server is also rendered on the client which means you can see inside of my console log it's rendering out server on the client now what happens though if this server component was doing some type of data fetching for example it was getting all of these different to-dos inside of here and I wanted to render this as like an async component like that and I wanted this to occur on the actual server well to do that and to get around that I need to pass this component into my client component as a prop so inside of here I could pass along a child however I want I could pass it along as a child like this where I could just say that I render out that server and I could import that just like that so this is going to be passing it along as a prop so inside of here I can get those children just like that and I can render out those children and you can just ignore the errors this is just because I'm using typescript so we'll type this as any there we go and now if I give everything a quick save and I just do a refresh of my page over here you'll notice no longer in the console is it printing out server and that's because now this file is being rendered on the server and that's because wherever you import the file is where it runs so in our case we're importing this file in the server component here so it's running on this server while in the other case we were importing it here inside the client file which is why it was running on the client so since we're importing it inside here it actually runs this entire server component and then passes down the results to this client component here so if you want to be able to go from server to client and then back to server this is the only way that you can do it it but honestly there's not too many times where you want to do that and when you do this is not a huge inconvenience the one thing to watch out for though is that other Frameworks may do this slightly differently this is the nextjs way of doing things and a lot of this is overlapping with the react way of doing things but at this current time it's very blurred the lines between nextjs and react so it's a little bit difficult to say if every framework will do it this way or if they have their own ways of doing this but this is more so specifically for nextjs now I know this was a lot to cover so if you're interested in taking this to the Next Level and actually learning nextjs which is built on top of this I have a full crash course I'll link on the screen right over here and also you can check out my complete nextjs course it's going to be linked down in the description it covers literally everything you need to know about nextjs to be an expert level nextjs developer with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 182,595

Keywords: webdevsimplified, rsc, react server components, server components, server vs client components, server components vs client components, next.js server components, next.js 13, next.js 14, next server components, next 13, next 14, react server components tutorial

Id: rGPpQdbDbwo

Length: 15min 47sec (947 seconds)

Published: Tue Jan 23 2024