Repo: github.com/bholmesdev/simple-rsc Let's build a node server, stream an RSC to your browser, and handle client component bundling! #javascript #programming #reactjs #tutorial
Пікірлер: 107
@t3dotgg5 ай бұрын
One of the best RSC videos I've seen so far
@developsdaniel4 ай бұрын
You meant the best though right?
@iamfrankstallone4 ай бұрын
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. 😅
@bholmesdev4 ай бұрын
Appreciate that so much! Glad it all clicked for you 🙌
@thejackshelton4 ай бұрын
I think Ben just did a better job explaining RSC's in 20 minutes than the entire industry in the last 2 years 😅
@dgurney5 ай бұрын
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
@ProjectNeo-tk4hmАй бұрын
So cool, I also had an idea that RSC looks a lot like PHP, and you confirmed it!
@joan.paucar4 ай бұрын
Dang, I will just say ‘underrated video for devs’, great video Ben
@lebon121129 күн бұрын
Amazing! You do make RSC look simple, and definitely understandable 👏🏼
@rockNbrain4 ай бұрын
Great job Ben ... very interest to understand the magic behind these frameworks!!
@antoniojurkic74553 ай бұрын
This is awesome. So concise, fun and without unnecessary info. Please do more! 👏
@Akshatgiri4 ай бұрын
This is awesome! Can't wait for every ecosystem ( go, laravel, rust etc ) to add react server components to their frameworks.
@armchair-architect4 ай бұрын
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.
@neociber244 ай бұрын
Never though about using React server components outside JS
@Akshatgiri4 ай бұрын
@@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.
@pvsagar924 ай бұрын
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 !
@Jdthegeek4 ай бұрын
Only a few minutes in and became an instant subscribe. So few videos are this clearly explained! Thank you.
@maxwebstudio3 ай бұрын
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 !
@igrb5 ай бұрын
the fact that you did this in 19 mins is CRAZY common whiteboard man win
@thisweekinreact4 ай бұрын
Great video, and also nice teaser for the 4h stream that I want to watch now 😄
@TanweerAlam20083 ай бұрын
This a great presentation style. Appreciate the energy.
@sylarfx4 ай бұрын
Instant subscribe within the first minute. Love the energy!
@fkondratov20 күн бұрын
my brain got grilled a couple of times during this, but it was worth it
@NiklasZiermann4 ай бұрын
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 :)
@developsdaniel4 ай бұрын
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. ❤❤
@4lissondev5 ай бұрын
This video is amazing!!!! Thanks Ben.
@DanelonNicolas4 ай бұрын
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.
@aleksamitic66554 ай бұрын
Amazing content mate! Keep it up!
@abdessamadchokri3522 ай бұрын
Woow, Absolutely the best SSR tuto explanation !
@combatninjaturtle5 ай бұрын
Yessss! This is what I needed. Thanks man!
@DEV_XO4 ай бұрын
Amazing video Ben!
@idmt933 ай бұрын
Great content man! Subscribed
@TrostCodes4 ай бұрын
You're incredible dude, this was excellent!
@bholmesdev4 ай бұрын
Thank you Mr. Horse! ❤
@saramshshrestha76412 ай бұрын
Damn, you're really good. It was awesome.
@Andrei_Calazans4 ай бұрын
Incredible tutorial
@Marhaenism19304 ай бұрын
good one ben, and thanks for ur explanation in less than 20mins
@bholmesdev4 ай бұрын
Thanks! Short explainers are my specialty :)
@s1n7ax3 ай бұрын
Bruh. This is the best react related video ever
@aamiramin61124 ай бұрын
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
@bholmesdev4 ай бұрын
Appreciate that so much! Will do ❤️
@jitx27975 ай бұрын
Wow. I am stunned
@FreeCodeArena3 ай бұрын
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
@bholmesdev2 ай бұрын
Haha, glad I could be some nerd entertainment for you! Feel the same watching LowLevelLearning explain C 😅
@codante-io4 ай бұрын
Amazing video! Thanks
@waldemarkunz91735 ай бұрын
Great video! Thank you.
@SSn0wx4 ай бұрын
Damn this is a super nice video, keep up the content
@ThugLifeModafocah4 ай бұрын
impressive knowledge display.
@aryomuhammad82542 ай бұрын
Half of the video kinda hurt my brain. Great video Ben! Thank you!
@jens26354 ай бұрын
well done, really interesting.
@kengreeff4 ай бұрын
Amazing!
@justpatrick_3 ай бұрын
Am a vue but my goodness this was great. It even clicked why this would be beneficial for react native
@pauljeremiahmugaya32923 ай бұрын
This is amazing 👏
@sonipratik6405Ай бұрын
Wow this is awesome ❤️
@0xtz_4 ай бұрын
bro all this in 20 min 😮 🔥
@thegithaka2 ай бұрын
kudos!
@mattwayne91285 ай бұрын
Let's gooooooo
@BrendonSled4 ай бұрын
This is amazing. Have you tried implementing server actions?
@pogospoofer694203 ай бұрын
Dan Abramov will write a Novel explaining this (also other Reat devs). You are the best!
@jim.....2 ай бұрын
i believe this video is inspired by dan's post from last June of the same name github /reactwg/server-components/discussions/5
@crapfartsmen5 ай бұрын
Hell yeah dude
@muhammadyousufhere4 ай бұрын
Wow Man! 😮
@kumnegerwondimu98483 ай бұрын
u are so underrated
@romank1ng5284 ай бұрын
Amazing video! Very thorough, I also like to use hono, however I couldn't help but wonder what shell prompt you're using
@bholmesdev3 ай бұрын
Ah thanks! And I'm using oh-my-zsh with spaceship prompt github.com/spaceship-prompt/spaceship-prompt
@najlepszyinformatyk16614 ай бұрын
Cool
@wouter16254 ай бұрын
this video is cracked
@amaechinaikechukwu82664 ай бұрын
❤❤❤
@anasrin4 ай бұрын
cool way to use snippet
@toothless.tarantula4 ай бұрын
Wow
@iPankBMW5 ай бұрын
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 :)
@bholmesdev5 ай бұрын
Yeah, I generally just... don't like NextJS' aggressive caching strategy. Hoping they make caching a manual opt-in instead of an invisible default
@iPankBMW5 ай бұрын
Whats your preferred JS Framework/Library?@@bholmesdev
@noahginsburg61403 ай бұрын
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.
@bholmesdev3 ай бұрын
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!
@noahginsburg61403 ай бұрын
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
@drprdcts4 ай бұрын
Great tutorial! What browser are you using?
@bholmesdev4 ай бұрын
arc.net !
@lutfiikbalmajid4 ай бұрын
I have try creating Htmx server component with Elysia :D
@echobucket29 күн бұрын
Where is the W3C RFC on this proprietary format React is using here?
@martingreler623629 күн бұрын
Bro coded up nextjs in 20 minutes
@supriyomonndal61995 ай бұрын
Amazing work ben! What's the extension doing the auto complete?
@bholmesdev5 ай бұрын
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
@echobucket29 күн бұрын
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"
@acopier13 күн бұрын
stfu it ain't that complex
@atharvapise5 ай бұрын
ohh damn, hot clip by Ben after a long time. RSCs for the win
@ahmedAltariqi5 ай бұрын
Dude, I can't code along without pausing, because you're using a lot of snippets lol Share them please!
@bholmesdev5 ай бұрын
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.
@ahmedAltariqi5 ай бұрын
@@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
@jackpurdoneverydayzero5 ай бұрын
Spotifn't haha
@guozhangliew73024 ай бұрын
so RSC is not doing SSR?
@bholmesdev4 ай бұрын
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
@guozhangliew73024 ай бұрын
@@bholmesdev awesome thanks for reaching out to the team! appreciate it!
@Alcani3ca2 ай бұрын
I'm so lost. How do you center a div??
@bholmesdev2 ай бұрын
sir this is a wendy's
@bobobo16734 ай бұрын
How old are you?
@fullstack_journey4 ай бұрын
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)
@ray-lee5 ай бұрын
please fix nextjs
@bholmesdev5 ай бұрын
We did! astro.build ;)
@mohamedtaher88Ай бұрын
why cant you simply first explain the "WHY" ?
@madeinhvn5 ай бұрын
Woah what a new Ben video that's more than 2 minutes??
@passarygmail27802 ай бұрын
I wonder how the virtual dom would look like in the browser... would love a reels on that one