React Server Components Examined

January 17th, 2021

Hello everyone, today I'll try to understand then explain what React Server Components are and why would we use it over other existing solutions :).

Now I need to admit that it's been a while since the Server Components announced by the React team and the hype is kinda faded since then. Yet I wasn't able take a look at it deeply because since it was ( it still is actually ) experimental, it just looked half baked to me and I decided to leave it to another time, ideally after it's more stable and widely used. But recently I wanted to take a look at it and I saw many positive commands going around the subject, and after I made my research I can say it's a total step forward and totally worth to take a look at.

WHY?

Actually the key question here is, why? Why would someone want to use something like SSR(Server Side Rendering) or React server components in their application over CSR(Client Side Rendering)?

All the answers can be melted under 2 topics basically; SEO and Performance.Before we examine those 2 fields I should briefly mention what is SSR and CSR.

CSR

With this approach your browser basically loads lots of JS(depends on the application size) and renders it and then reveals the web page to your side.

SSR

With the SSR however your browser just receives a pre rendered HTML from the server side and naturally all the heavy lifting is done by server in this case.

Now we can talk about SEO and performance benefits of SSR. For the SEO part I'll just briefly mention about some corner stones and I'll leave a link for you to make a deeper research on topic. In general when your application is only CSR you are starting to have many problems on the SEO side and there are no quick fixes for the situation out there yet, these problems can be evaluated from many aspects like how Google Bots scan your website and so on and so forth so if you are interested more about the topic I encourage you to go and checkout the link above. But yeah basically with SSR we'll have a much consistent SEO infrastructure, so that makes huge sense to serving the pages that we want to expose to Google with SSR and it's possible with the hybrid solutions from the frameworks like Next.js, I'll explain what's new with React Server Components on this matter in a minute.

When it comes to performance side it's kinda obvious from their definition, with JS applications we are usually dealing with lots and lots of libraries and rendering all JS on the browser doesn't make any sense from the performance side, so when an app gets larger and larger using SSR to put workload on the server might be a good idea and a commonly used practice. With React Server Components we can deal with many large

What's up with React Server Components

Now that you might wondered that I mentioned about Next and Next basically solves lot's of problems with their hybrid approach and you can learn more about it here.

Main two things that comes with React Server Components are, first a different type of data, some sort of a description other than HTML coming from the server.

You can check the same demo of next-server-components from here and try it yourself.

The other thing is being able switch between SSR and CSR on a component level. With Next.js formerly you could only do that in a page level, so that basically means you could only make a page either SSR, CSR os SSR(another thing that Next supports). That'll make React application way more flexible in the future, especially after the concurrent mode is also finalized( another experimental feature of React that has hyped for so long, you can check out what is concurrent mode from the link here. )

By the way of course that doesn't mean you should leave Next or not to start learning it never, because after React Server Components are stabilized probably Next's go to SSR solution will be that too.

I didn't dive in the technical differences in detail in this post but I might do a post like that in future.

Conclusion

• React Server Components helps developers to reduce their JS bundle size dramatically with a unique way to help performance issues.

• Provides more flexibility than the similar solutions before.

• Now with React Server Components we can reach our backend from anywhere in the component tree and that's a big improvement compare to older solutions

Overall, I consider React Server Components as a total step forward from React and I really liked it.

That's it for today and I hope to see you in the new ones, take care :)