React Server Components (with Next.js Demo)

React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

0:00 – Introduction
0:45 – How is this different from PHP / Rails?
1:11 – Overview
1:31 – Hybrid Applications
3:50 – How is this different from SSR?
5:14 – React Suspense and Concurrent Mode
6:20 – Hosting React Server Components
6:59 – Demo
8:53 – Conclusion

Links
–––––

–––––

[oliverloops.]

Good job simplifying the whole explanation 🙌, this new experimental feature it's really exciting!

[LauraBeatris]

Best way to finish this year: Watching this amazing video

Thanks Lee ❤️

[HarryManchanda]

That's my note at 08:36 ... "Awesome Work" ... I was the one testing it 😁

Happy New year

[PeterKellner]

Well done! I'm looking forward to concurrent mode when it eventually (hopefully) gets released.

[agustinmaggi]

This reminds me of the functionality of laravel called Render Sections for rendering one section of a template using Ajax, a long time ago.

[surabhisugandh]

Thanks for sharing! Very informative and to-the-point :)

[JohnArcher]

Having worked with SSR I might assume that shipping all components in client bunle might be cheaper traffic-wise but more expensive on the first load. Honestly, with aggressive bundle splitting and lazy loading you don't have to have a huge budle you serve the clients on the first load. The chunks of routes and lower viewport components load lazily as soon as the whole page is scaffolded and there's data reusability there. Everything you serve from the server as raw html stream or jsx converted to what he showed here - don't forget there's a network penalty for that! Dan in his speech mentioned 23% bundle reduction, well, you'll download even more jumping from page to page eventually. Or not. Especially if you use a lot of hybrid components without client/server extension prefix - you'll pay twice for those. Faster initial pageloads (css sent from server?) and security concerns - probably yes. But I assume I'tll take a Next.js and such to set it up properly, rather than a freelance solo or a team of React middle devs struggling with putting all the pieces together correctly in the reality of current dev-community

[ApoorvMote]

Great video!! I have been seeing people saying DONT render private routes with SSR. Only render public routes with SSR. Is it true? Of course on private routes you don't care about SEO. But I do care about faster performance. Because you did render private todos from server components.

[vs]

Awesome content! Keep up the good work :)

[CarlosEnriqueDev]

Hi Lee, good video. could you helpme about doubt? i am doing some tests with nextjs an i have a doubt. I receive a post request with data json that from an external service when I upload some files. I listen the post request that they send me to my endpoint api within NextJs and I can see the data. But I can't pass this data to the client side, to change a state. How would you do it. Thanks for the help.

[arcosd]

Hey Lee, I'm enjoying your videos, you're very thorough and well explained. Do you have current material because I just getting your videos from 2 years ago.. Thanks!

[ThomazMartinez]

Double check on what framerate your camera is set and shutter speed. try setting fps to 24 and shutter speed to 1/50

[FergusMeiklejohn]

So cool.. when we likely to get this in Nextjs?

[iamdeveloper]

so when this feature will be applied with no risks?

[chipdarip]

noob here. does this mean React will be able to replicate everything I can do with Django?

[blizzy]

Just a minor nitpick, it's "et cetera, " not "exetera."

[surazsunny]

bruh! next time try to use code images or slides like ....to explain, you are doing everything with more
camera just on your face