So, like a lot of refetching is saved because you already have like majority of the stuff on your plate, but with server-side rendering, every time you like go to the page or like maybe you refresh the server-side rendered app, it has to like do all of this stuff every time again and again. So, it can lead to like high server-related costs as well.
Now, like client-side rendering applications are great for like creating PWAs while like the client-side rendering is better with search engine optimization. And the fact is really simple because it has like you're showing something on the page and the web crawlers, or the different APIs can like have access to that information so that they can show it on the websites. So, so far, like we have like these set of advantages. And if you see like disadvantages, again, like client-side rendering does not have what SSR has like initial page load. what client-side rendering is having like, like subsequent payload. You have to do like rendering stuff and creating the web pages on the browser again and again. And client-side rendering is again bad for SEO, which we already mentioned in the advantages section while SSR is, you know, good with stuff like, like things like SEO. So like with, with that in place, let's like just make all this list a little bit shorter and focus on only these two things.
Now, imagine another part of the story, and this can be the, you know, maybe the climax of the story. So let's say now, instead of Bob calling his sister, maybe what would be better if like, maybe Bob had access to all of these, like, you know, really, really cool tools to build the sand castle, right? Like, if you would have like access to all of them, like he could maybe choose like, you know, how to like putting it in our analogy how to basically get both of the advantages, you know, having somebody else to help bring the castle versus how we can build that stuff together. So maybe he can like merge both of these benefits and disadvantages together with only the set of tools maybe. Right. And this is basically the, you know, what server components are that the React team has introduced. Right. So, several components are like a new. So if you talk about in, you know, technical terms, so several components are React's new way of abstracting both the goodness of client side and server side rendering, which actually like instead of giving you a page or like HTML CSS or like something as an HTML kind of an output, like both these techniques do, it gives you some intermediate abstraction format that you could say, where it can help render things faster and it can help you choose what is it that you want to render things on the client, versus what you want to render things on the server in the same page, because server side rendering does not allow you to. So let's try to look at how server components is changing these things, right? So let's again, see a very simple diagram of a client and a server. Now, so like client again requests for a webpage. Sorry, server gets, now server is again doing some part of server side rendering. It's actually rendering your server components on the server. And now, instead of giving you this output, it does not give you your HTML or like server side rendering, some output that you can directly show to the browser.