React server components from scratch!

Repo: github.com/bho...
Let's build a node server, stream an RSC to your browser, and handle client component bundling!
#javascript #programming #reactjs #tutorial

[@t3dotgg]

One of the best RSC videos I've seen so far

[@developsdaniel]

You meant the best though right?

[@iamfrankstallone]

This is one of the best 20 minute tutorials I’ve ever watched. 👏🏻 Ben, your format, production, depth of knowledge, ability to articulate that knowledge, and humor created a masterpiece. 🎉 I had no interest in ever learning how to do this. As a front of the front end recovering React developer my interest in this subject was low coming in. You magically peaked my interest, keep me engaged, and - to my absolute shock - I understood everything… including the webpack monkey patch. 😅

[@bholmesdev]

Appreciate that so much! Glad it all clicked for you 🙌

[@thejackshelton]

I think Ben just did a better job explaining RSC's in 20 minutes than the entire industry in the last 2 years 😅

[@dgurney]

Wow this was an incredible explanation. Of all the videos and posts I’ve seen about RSC, this is the ONLY ONE THAT ACTUALLY MAKES SENSE and explains how things really work under the hood. Well done

[@changkaizhao]

Thank you Ben for helping me understand the scene behind React and Next.js.

[@brayan_joan]

Dang, I will just say ‘underrated video for devs’, great video Ben

[@ProjectNeo-tk4hm]

So cool, I also had an idea that RSC looks a lot like PHP, and you confirmed it!

[@FreeCodeArena]

I dont know half the things you just did, but this was super fun to watch😅. I'm gonna go watch more of your videos

[@bholmesdev]

Haha, glad I could be some nerd entertainment for you! Feel the same watching LowLevelLearning explain C 😅

[@pvsagar92]

With this depth of knowledge and the ability to code it as well, you can very well be a core React team member. Great work bro !

[@antoniojurkic7455]

This is awesome. So concise, fun and without unnecessary info. Please do more! 👏

[@rockNbrain]

Great job Ben ... very interest to understand the magic behind these frameworks!!

[@Akshatgiri]

This is awesome! Can't wait for every ecosystem ( go, laravel, rust etc ) to add react server components to their frameworks.

[@armchair-architect]

If all you need is server side rendering, then Laravel Livewire would get you there without all the extra plumbing. However if your use case requires server side rendering and then intricate client side logic as well, then this approach is perfecto.

[@neociber24]

Never though about using React server components outside JS

[@Akshatgiri]

@@armchair-architect Absolutely. Most projects I work on happen to require a dynamic frontend somewhere in the app. And though web components are a pretty good solution, react server components + react client side components + a solid backend stack is the move.

[@sylarfx]

Instant subscribe within the first minute. Love the energy!

[@maxwebstudio]

Men, first this format is really cool. Nice to see you on a setup different than from your YT shorts. Second that explanation was just awesome ! Thank you !

[@yucelmutlusoy]

Thiy guy knows what he is doing, great demo 👏🏻

[@lebon1211]

Amazing! You do make RSC look simple, and definitely understandable 👏🏼

[@DanelonNicolas]

I want you as president of the whole world. I think it's impossible to be more clear. Thanks! And thanks to Sebastian for sharing your video.

[@thisweekinreact]

Great video, and also nice teaser for the 4h stream that I want to watch now 😄

[@aamiramin6112]

Ben, I'm amazed by the level of knowledge and expertise that you have it's amazing. Thanks for sharing this and I love it please keep sharing your knowledge

[@bholmesdev]

Appreciate that so much! Will do ❤️

[@JohnBuildWebsites]

Only a few minutes in and became an instant subscribe. So few videos are this clearly explained! Thank you.

[@aryomuhammad8254]

Half of the video kinda hurt my brain. Great video Ben! Thank you!

[@TanweerAlam2008]

This a great presentation style. Appreciate the energy.

[@developsdaniel]

I’m enjoying following your journey Ben, I keep ending up at the places you’ve been solving - 11ty islanding, then fed up with 11ty dev experience, I’ve been looking to make a JAM stack site boilerplate with static server component islanding, and this vid did half the work for me. ❤❤

[@abdessamadchokri352]

Woow, Absolutely the best SSR tuto explanation !

[@Marhaenism1930]

good one ben, and thanks for ur explanation in less than 20mins

[@bholmesdev]

Thanks! Short explainers are my specialty :)

[@NiklasZiermann]

Awesome explanation. Stuff like this will hopefully help more people understand which parts of server components actually are just react and which are nextjs magic :)

[@TrostCodes]

You're incredible dude, this was excellent!

[@bholmesdev]

Thank you Mr. Horse! ❤

[@echobucket]

At any point when watching this or writing this, did anyone stop to say "Wait.. this is too complex, perhaps we shouldn't be doing this"

[@acopier]

stfu it ain't that complex

[@s1n7ax]

Bruh. This is the best react related video ever

[@igrb]

the fact that you did this in 19 mins is CRAZY common whiteboard man win

[@fkondratov]

my brain got grilled a couple of times during this, but it was worth it

[@combatninjaturtle]

Yessss! This is what I needed. Thanks man!

[@pogospoofer69420]

Dan Abramov will write a Novel explaining this (also other Reat devs). You are the best!

[@jim.....]

i believe this video is inspired by dan's post from last June of the same name github /reactwg/server-components/discussions/5

[@saramshshrestha7641]

Damn, you're really good. It was awesome.

[@4lissondev]

This video is amazing!!!! Thanks Ben.

[@shawnmclean7707]

Would love to see more like this on things like hydration and react query. What are those guys doing with suspense, hydration and RSC?

[@DEV_XO]

Amazing video Ben!

[@JamesQQuick]

This was effing wild! damn lol

[@jitxhere]

Wow. I am stunned

[@minhđoàncông]

amazing work. Thank for helping of you.

[@aleksamitic6655]

Amazing content mate! Keep it up!

[@sonipratik6405]

Wow this is awesome ❤️

[@Andrei_Calazans]

Incredible tutorial

[@kengreeff]

Amazing!

[@codante-io]

Amazing video! Thanks

[@justpatrick_]

Am a vue but my goodness this was great. It even clicked why this would be beneficial for react native

[@pauljeremiahmugaya3292]

This is amazing 👏

[@0xtz_]

bro all this in 20 min 😮 🔥

[@idmt93]

Great content man! Subscribed

[@code_lab_9994]

You make easy to understand thanks

[@HurmaanAhmed]

My man built Next in 20 mins.

[@BrendonSled]

This is amazing. Have you tried implementing server actions?

[@noahginsburg6140]

What a video! Question: I have an async data fetching RSC. When my application builds, a static page is rendered with the HTML rendering the data from the data fetch. Correct so far? Now when a user say navigates to my application site, I need that component to render with fresh data. How will that currently static page know to re-render with fresh data? I can't imagine everything needs to be marked "force dynamic", at least in nextjs. I may still be missing a concept around this. Thanks again for a great video.

[@bholmesdev]

Hey thanks Noah! Yes, page re-rendering is an interesting concept we didn't cover in the video. Next.js has special automations for caching static vs. dynamic data. My understanding is: - if a component is *only* used for static content, it's render to HTML at build time as you described. - if that component is then used to re-render content dynamically, that component now ships as a Javacript endpoint. Next.js smartly decides when this switch happens. Hope that helps!

[@noahginsburg6140]

That does help. I think this video offered great clarity into RSC implementation but the NextJs abstractions seem to muddy that up a bit. Anyways, thanks for responding. Look forward to more content.@@bholmesdev

[@gaastonsr]

Hey! thanks for the video. Did you create those snippets or are you using an extension?

[@141habiburrehman4]

It blows my mind man😂

[@kumnegerwondimu9848]

u are so underrated

[@SSn0wx]

Damn this is a super nice video, keep up the content

[@romank1ng528]

Amazing video! Very thorough, I also like to use hono, however I couldn't help but wonder what shell prompt you're using

[@bholmesdev]

Ah thanks! And I'm using oh-my-zsh with spaceship prompt github.com/spaceship-prompt/spaceship-prompt

[@niranjansingh-il1pf]

Hey Ben, this is so easy and still detailed. But... If you are not returning HTML, how does crawlers figure out the SEO??

[@jens2635]

well done, really interesting.

[@mattwayne9128]

Let's gooooooo

[@wouter1625]

this video is cracked

[@chimbu4822]

Fantastic

[@ThugLifeModafocah]

impressive knowledge display.

[@waldemarkunz9173]

Great video! Thank you.

Nice explanation, nice video. Thanks! I'd better stick to PHP instead of this much dark magic 😬

[@najlepszyinformatyk1661]

Cool

[@anasrin]

cool way to use snippet

[@kikevanegazz325]

Wow!

[@thegithaka]

kudos!

[@edvinbeqari7551]

Is there an equivalent createFromFetch in React 19 instead of the experimental lib? What is it doing?

[@muhammadyousufhere]

Wow Man! 😮

[@atharvapise]

ohh damn, hot clip by Ben after a long time. RSCs for the win

[@amaechinaikechukwu8266]

❤❤❤

[@code_lab_9994]

Can you please guide me how to convert existing large react app to server side?

[@echobucket]

Where is the W3C RFC on this proprietary format React is using here?

[@flexdash]

Great tutorial! What browser are you using?

[@bholmesdev]

arc.net !

[@graphiclife5416]

Web dev 2024 is fked up. Can we please make this 100x more complicated and if we want to add auth 100x more complicated? That would be epic 🤓

[@DidierHernandez]

How its could works loading a millions of records on streaming and looking every single day this react technology becomes more complex instead of easy to dev. Every React project is a very complicated environment that is worked on by other developers.

[@martingreler6236]

Bro coded up nextjs in 20 minutes

[@iPankBMW]

Nice video! Do you know how we can make the default 30second (client side cache)/(router cache) for server components in Nextjs to 0 seconds? Its kinda impossible to get the latest data in SRC on subnavigation (clicking on component). Maybe create a PR for Nextjs about this issue :)

[@bholmesdev]

Yeah, I generally just... don't like NextJS' aggressive caching strategy. Hoping they make caching a manual opt-in instead of an invisible default

[@iPankBMW]

Whats your preferred JS Framework/Library?@@bholmesdev

[@guozhangliew7302]

so RSC is not doing SSR?

[@bholmesdev]

Ah, good observation! SSR is a separate step that we *can* add so the user sees an initial view while the rest of the page streams down. I reached out to the React team about this and got a pretty minimal example if you're curious: github.com/mattcarrollcode/react-serving-patterns/tree/main/ssr-and-rsc

[@guozhangliew7302]

@@bholmesdev awesome thanks for reaching out to the team! appreciate it!

[@toothless.tarantula]

Wow

[@lutfiikbalmajid]

I have try creating Htmx server component with Elysia :D

[@Alcani3ca]

I'm so lost. How do you center a div??

[@bholmesdev]

sir this is a wendy's

[@ahmedAltariqi]

Dude, I can't code along without pausing, because you're using a lot of snippets lol Share them please!

[@bholmesdev]

Understood! Kinda expect coders to pause. It's a delicate balance between tight explanations and typing every thing. If you clone github.com/bholmesdev/simple-rsc and open in VS Code, all the snippets are there. Just empty out `server.js` and get going.

[@ahmedAltariqi]

@@bholmesdev Thank you, Ben!

[@smithshaw1151]

Can one use rsc with htmx?

[@bholmesdev]

Admittedly no, they are very different approaches to rerendering server content. RSCs send a format from the server that isn't _quite_ HTML, so HTMX couldn't process it

[@alexodan]

it's amazing how i get 420 errors while trying to do this by my own, i wonder if others have faced the same

[@fullstack_journey]

This is what the company I'm in did, 7 years ago.. and were still maintaining this proprietary piece of sh.. code to this day (it's horrible)

[@supriyomonndal6199]

Amazing work ben! What's the extension doing the auto complete?

[@bholmesdev]

I'm using VS Code snippets I wrote myself! Intended to make the video run smoother, but you can use them yourself by cloning github.com/bholmesdev/simple-rsc

[@bobobo1673]

How old are you?

[@jackpurdoneverydayzero]

Spotifn't haha

[@ronalchenco]

A lot of config things to set a simple list :'(

[@mohamedtaher88]

why cant you simply first explain the "WHY" ?

[@antonanton22743]

G

[@ray-lee]

please fix nextjs

[@bholmesdev]

We did! astro.build ;)

[@madeinhvn]

Woah what a new Ben video that's more than 2 minutes??

[@planetmall2]

Amazing!