React Server Components: A Comprehensive Breakdown

This is a kick ass explanation with lots of passion coming through the examples. Thank you sir! <3

after playing a while with next and RSC and getting to understand how it works, it's actually crazy to have an overview how optimized things get. That is explained very well in this video

great video

Bro it's videos like this that remind me why I subscribed like 12 months ago

But why use React then?

Everything we need to understand all of the new and upcoming features. Thank you Theo!

Hey theo. I have a classic backend application with react as frontend and python flask as a backend.
I am not allowed to move the database and credentials to the frontend due to security .
How can i levearage this ssr and similar technologies in not Node.js backends
.

20 Megs of JavaScript. OMG..

AMAZING CONTENT!!

So React can now basically do static HTML markup generation on command from the client, instead of doing it on application build. Cool. Combine that with a Redis cache and you'll have the next generation of blazingly fast Web applications.

Remember java serverfaces?, well I hate this exactly for the same reason, has nothing to do with the regression to php like code or the super shady move by Versel, the problem is trying to abstract away the server is a bad idea period.

This is the kind of content I subscribed to you for, amazing in depth explanations!

I agree "use client" was a mistake. I sent l picked up nextjs after a year away and missed the memo that it will still render on the server, and was a very frustrating time until I realised this

Although RSC greatly mitigated the performance problem in SSR, i still find route switching to be janky than a well-built SPA (PWA mode in which it has no bundle-downloading-problem right after 1st load)...not to mention the running server problem, it is basically adding performance overhead for a non-node-js backend workshop. But it makes the prototyping phase extremely fast....I like it when doing early stage exploring.

Isn't this comparable to classic technologies like PHP, JSP, ASPX, ... so going back from SPA to more traditional web app development at the end?

Thank you so so much Theo! These videos are both educational and inspirational. Like you content and approach so much! Thank youand have a nice day!

dang it

RSC - welcome to functionality that almost every other framework supported at V1. :)

So, Node is PHP now, got it.

I loved this man you explained everything so good. I already knew a lot of it but didn't have a complete grasp on the overall concept and it's so much more clear to me thank you so much for this.

When did reading someone else's content become a thing. Just read the article first. You add no particular insight into creating a metal modal for your audience, other than what Josh wrote. This is very lazy content just like Primeagen it's why I no longer consider you viable sources. Shame you could do so much for mid level devs. Because you do have a really good presentation style when you are explaining concepts.

Thanks Theo

Comprehensive is the right word for this. I think the major gripe (and this isn't explicit to react) is the lack of documentation/ best practices so the standard copypasta learn pattern isn't feasible, plus it's a new paradigm shift in thinking if you already had the original paradigm shift of react. Now as we approach a year, hopefully vercel isn't the only player in the game and we actually have more open dialogues and discussions other than "change bad."

One thing that could’ve been addressed: server components can have state mutable by clients as well.

What if a i18n server component depends on a 🍪 to only send the necessary translation strings in the html and the user changes the language via a button click?

We need a router here to trigger a one-time render of the entire react tree (incl the RSCs) afaiu (eg router.refresh() )

Apart from this: great video, I’m thankful that you made it so comprehensive.

I love that you used Josh’s very well written article and hydrated it with your examples, explanations & visualizations. 🪴 💧

as a (mostly) server developer who works for a company that still uses heaps of jquery on the frontend, i benefit a lot from these kinds of videos, which is knowledge that you would just acquire through exposure and usage of the tech otherwise. Thanks for helping me keep up to date on the myriad frontend frameworks/paradigm shifts

How is this different from PHP? 😁

Old is always GOLD

i don’t hate him, but i hate how he says “yall”

Great video!

Amazing video! Thanks Josh and Teo!

Amazing video. Thank you Theo

My point is:

This is going to be useless in a few years because javascript will get lighter and the internet faster, so, the loading spinner is going to be almost invisible

This was amazing!!! You covered almost everything I was missing!

So, let me get this straight, it's just html template + js for reactivity? Just like we did 100 years ago at Jquery times?

Or better yet, it's just SSR + Hydration?

Ok

Common Joshwcomeau W + Banger video and demo. I wish I had this type of resources a couple of months back

Thanks for the vid, now it's easier to wrap my mind around RSC. I wonder, does streaming make sense when the page is cached in a CDN?

But, RSC costs more money. You wouldn't use RSC for a blog and even an app if you can go Client Side rendering with a static hosting, right ?
Who cares about these milliseconds or even a second of performance ?

I care about cost effectiveness. Therefore, i will still go with cheap CDN and client side

At this point they should rename React as there's not much reacting going on anymore when the default behavior is to have stateless server components.

It's insane how after a year of so of demos and talks about RSC so many engineer still get them wrong.

What's the name of the software for whiteboarding ?

If you have a SINGLE client component that needs to be client then all next pages become loaded. You could have 100 pages and 1 heavy one and it'll kill your app.

Why does next not handle this better since it's all per page?

The biggest thing missing from all these videos is they don't explore what happens later in client side navigation, how are things prefetched and so on.

You've opened my eyes!

NextJS Router is just not ready for Prime Time Enterprise level... production. Its not. SO, Pages directory is our only alternative.

Indeed, another example of utilizing a server component is to manage the localization dictionary, avoiding the need to include it in the client-side JavaScript bundle.

One of your (and kudos to Josh) best videos! Really well underlined! .. and packed in a beautiful summary well done breakdown.

Web dev peaked with classic asp back in 2007.

Great video. Server component are really awesome, Idk how anyone can argue against it..