React Server Components: A Comprehensive Breakdown

Поделиться
HTML-код
  • Опубликовано: 20 ноя 2024

Комментарии • 160

  • @turolretar
    @turolretar Год назад +358

    “breakdown” is a very suitable word for describing my mental condition when working with react

    • @ДжемИсуф-е8ю
      @ДжемИсуф-е8ю Год назад +3

      Such a good comment

    • @anhta9001
      @anhta9001 Год назад +5

      There is just too much complication, right? From my experience, prerendering React is really CPU intensive. Because of that, I created my own framework, and with proper caching, it can serve up to 25k requests / second (~400MB/s throughput) on my local machine, much faster than a similar React app. Overall, I think server side React can be fast too, but there is certainly too much complication involved.

    • @epiclifesociety
      @epiclifesociety Год назад

      Slow down. Slow is smooth, smooth is fast.

    • @ddomingo
      @ddomingo Год назад +6

      They are reinventing server side rendering and still make fun of the php and rails communities

    • @meltygear5955
      @meltygear5955 Год назад +1

      @@ddomingo Surely you're not implying that a bunch of people online having opinions represent "React".

  • @codeChuck
    @codeChuck 9 месяцев назад +1

    A good and detailed explanation of RSC and partial prerendering!
    As I understand this model, Next 14 uses Astro's paradigms:
    1. Prerender static server components, that are above a ⌛ -> Deploy on Vercel 🚀 once, then send cached files 📑from CDN as initial response for every request
    2. SSR dynamic server components, that use cookies🍪/ headers -> Render server component on the server on each request ♾and send new html partial 🎁to the client 💻
    3. Await promises in server components that are wrapped in ⏳ -> HTTP stream 🌊html partials to the client 💻
    4. Profit :D

  • @martenveldthuis
    @martenveldthuis Год назад +17

    One other point is that more of your code runs in a much more predictable environment (your own server). Even if the time to first full page render is a little longer with RSCs if the user was on a gigabit connection next to the datacenter, because you're sending a lot less data to the client, the 95% percentile time for the first full render is probably a lot shorter. The users with the worst connections are now experiencing a huge speedup. And it's way easier to measure performance and track exceptions etc on the server as well.

  • @JEM_GG
    @JEM_GG Год назад +7

    Thank you Theo! This solidified some things I was working through on all my recent apps. I haven't used Pages in weeks and I love it.

    • @JEM_GG
      @JEM_GG Год назад

      And obviously kudos to Josh! 😜 Been following his blog for years now and taken both his courses 😁 💅

  • @lightninginmyhands4878
    @lightninginmyhands4878 Год назад +10

    I'm surprised you skipped Josh's section on providers (the theme one). that was definitely a head scratcher for some of us. he explained things fairly well.

  • @SalsaAS85
    @SalsaAS85 11 месяцев назад +5

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

  • @timfrancois9368
    @timfrancois9368 Год назад

    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

  • @tak68tak
    @tak68tak Год назад +1

    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.

  • @faraonch
    @faraonch Год назад +2

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

  • @joqim
    @joqim 11 месяцев назад +1

    Thoroughly enjoyed this past hour

  • @dronevilOO
    @dronevilOO 10 месяцев назад

    Amazing. Now I wish you'd read out all the tech blog articles that I can never get myself to do, but when you do it's so easily digestible.

  • @yramagicman675
    @yramagicman675 Год назад +9

    I'm confused about why there was confusion around the SVG loading at about 35:00. Are modern front-end devs so isolated from the concept of server side rendering that it's become a foreign concept to them? This whole server components thing seems to me, a dev who's been around since jQuery 1.11 days, like a return to form. We've come back around to building HTML templates and "rendering" them on the server, just like the early days of PHP, just with 80 more steps, and 100 more layers of abstraction. This isn't new.

    • @MNbenMN
      @MNbenMN Год назад

      RUclips just deleted the reply I was typing in order to show me an Ad... long story short: I hear that. SEO concerns kept me away from the all-client all-the-time rendering paradigm except for side-project apps. Seems like the pendulum is swinging back, and might bring React into my regular dev toolkit now.

  • @theklr
    @theklr Год назад +1

    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."

  • @patrickjreid
    @patrickjreid Год назад +2

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

  • @gabrielbianchi2246
    @gabrielbianchi2246 Год назад +3

    Awesome video Theo. ❤
    Love new RSCs

  • @zindev
    @zindev Год назад

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

  • @nawti2371
    @nawti2371 Год назад

    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.

  • @ComfyCosi
    @ComfyCosi Год назад

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

  • @Yutaro-Yoshii
    @Yutaro-Yoshii 11 месяцев назад +1

    Client component being restrictive reminds me of how async/await works. It felt restrictive at first because you can only use await inside async function, but it start making much more sense as you use it.

  • @billybest5276
    @billybest5276 Год назад

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

  • @jocdiazm
    @jocdiazm Год назад

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

  • @RevCorner
    @RevCorner Год назад +1

    Just wanna say thanks, this was so helpful

  • @StingSting844
    @StingSting844 Год назад +11

    What happened to the studio you rented for filming? We don't see any videos from there nowadays

    • @GratuityMedia
      @GratuityMedia Год назад

      These desk videos are from live streams and the studio ones are recorded offline as of now. This could change, not sure.

  • @jameswainwright5217
    @jameswainwright5217 Год назад +2

    Expertly explained! Love it

  • @parkerrex
    @parkerrex Год назад

    Ohhh boy. Added to watch later. Pumped for this.

  • @serge.stecenko
    @serge.stecenko Год назад

    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!

  • @Surviving_With_Nthangeniph
    @Surviving_With_Nthangeniph 9 месяцев назад

    I am glad most of you enjoyed , but I happen to find this session rushed through

  • @michaeldausmann6066
    @michaeldausmann6066 Год назад +8

    You focused a lot on initial page rendering, what about cases where what is fetched and rendered depends on user actions e.g. some sort of SaaSy, CRUDy stuff. Do you still solve this with e.g. Trpc + React Query or can I drop these tools and do everything with RSC's?

    • @muslim8622
      @muslim8622 Год назад +3

      Yes, we solve this problems, the same way as before
      Server component enable you to render UI on server with some cache behavior and use server side modules and function
      It’s almost like PHP but with client side navigation preserved

  • @rafamuttoni
    @rafamuttoni Год назад

    Amazing video! Thanks Josh and Teo!

  • @owenwexler7214
    @owenwexler7214 10 месяцев назад

    25:50 good pattern for when using an interactive switcher controlled by state to switch between displaying static components that can definitely be server components (trying to make as many things URLs as possible but can't make everything a URL due to the way things are set up)

  • @MajorBreakfast
    @MajorBreakfast Год назад

    48:13 I've been exactly wondering about "How do RSCs integrate with ?". Thanks for clearing this up!

  • @victorbrown3155
    @victorbrown3155 Год назад +1

    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.

  • @mr7clay
    @mr7clay Год назад

    I definitely concede RSC is better, but with gSSP we _can_ type the props, the page component NextPage, and push the props into a typed page-wide context. It's a huge hassle! But we *do* get clearer awareness of which processes are blocking first-byte delivery. 2 years into RSC usage we might find it hard to identify all the blocking queries. But yeah, other advantages of RSC make it a clear winner.

  • @lancebarreto
    @lancebarreto 10 месяцев назад

    Fantastic video Theo!

  • @PaulSebastianM
    @PaulSebastianM Год назад

    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.

  • @alebarrera1991
    @alebarrera1991 9 месяцев назад

    The server component that runs the client component that calls the server component that hydrates the client component

  • @DrewLytle
    @DrewLytle Год назад +2

    This is the way

  • @mementomori8856
    @mementomori8856 Год назад

    You've opened my eyes!

  • @bridgertower
    @bridgertower Год назад

    Amazing video. Thank you Theo

  • @dixztube
    @dixztube Год назад +5

    I don’t think most users care that much about a short loading screen and so to burden devs with all these paradigm shifts for the sake of some optimization and improvement of user experience (most users didn’t think was too horrible) it leaves you kind of feeling like you’re building the same thing (a better website for users) and just sort of transferring the cost for that to the dev.
    Sure there were annoying problems and managing state can be annoying but this will bring in its own set of confusing patterns and annoyances, even if well learned.
    And what’s next? It’ll be some paradigm shift in a few years to solve some “problem” , meanwhile users and managers could really give af

    • @perc-ai
      @perc-ai Год назад +2

      thats exactly what a noob would say lol, the user experience is EVERYTHING. It can be diff between a bankrupt company or a thriving company. You are acting as if its just all bullshit but what we do makes or breaks a business. New devs need to learn to adapt, tech is changing fast and its all about the UX these days alot of companies are rewriting their stack with the cash they have in the balance sheet

    • @asheykamp
      @asheykamp Год назад

      Maybe most users don't, but Google does, and you'll rank lower in search results if you have poor CWV, which a loading screen will obliterate.

    • @dixztube
      @dixztube Год назад

      happy for the response i'll study up more on the matter

    • @MNbenMN
      @MNbenMN Год назад

      It's not just about user experience, though. It's also about search indexing for discoverability. If the initial page load takes too long or doesn't contain the content to be indexed, search engines may just move on without gathering enough details to let people know your content even exists.

    • @perc-ai
      @perc-ai Год назад

      @@MNbenMN yeah thats right 100%

  • @Fernando-ry5qt
    @Fernando-ry5qt Год назад +2

    So, Node is PHP now, got it.

  • @TheSilasbulan
    @TheSilasbulan Год назад

    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?

  • @theLowestPointInMyLife
    @theLowestPointInMyLife Год назад +11

    If people care so much about performance, why are they using react?

    • @IvanRandomDude
      @IvanRandomDude Год назад

      kek

    • @VipulGaur3
      @VipulGaur3 Год назад +1

      Because they have a codebase which already has tens (or hundreds) of thousands of lines of code, and they can't start from scratch now.

  • @pipely
    @pipely Год назад

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

  • @lklivingstone7801
    @lklivingstone7801 Год назад

    AMAZING CONTENT!!

  • @HDv2b
    @HDv2b Год назад

    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

  • @ViperPacket
    @ViperPacket Год назад +1

    Overall this is a great video!

  • @emanuelfarauanu1760
    @emanuelfarauanu1760 Год назад

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

  • @aabhasdhaubanja1184
    @aabhasdhaubanja1184 Год назад

    great video

  • @Avlec1000
    @Avlec1000 5 месяцев назад

    Would trying to render a datepicker on the server be possible? Is doing it a bad idea?
    (I'm still interested in what folks think but... having watched more of this video it seems like I should "use client" to render the datepicker and pull in my react server components as props.)

  • @watchchat
    @watchchat Год назад

    Great video!

  • @Ikakoo2410
    @Ikakoo2410 Год назад

    Thanks Theo

  • @glenvollmer
    @glenvollmer Год назад +1

    I see that LIL UGLY MANE vinyl box set 🔥

    • @t3dotgg
      @t3dotgg  Год назад +1

      BISH IM MOROSE AND LUGUBRIOUS

  • @dixztube
    @dixztube Год назад +2

    I see why prime says go + htmx

  • @maruarios5620
    @maruarios5620 Год назад +2

    nice shirt

  • @LightTheMars
    @LightTheMars Год назад +2

    "Next export shouldn't exist because exporting throws away Next's features" 4:22
    We chose Next for a project *because* of it's ability to export to a static site. I get the argument, but for many projects a lot of the lost features are unnecessary.

  • @YazeedAlKhalaf
    @YazeedAlKhalaf Год назад +3

    How is this different from PHP? 😁
    Old is always GOLD

    • @someguy-dodo
      @someguy-dodo Год назад +1

      Current FE path looks as: PHP -> React -> Next.js -> PHP again :D

  • @paulomattos6753
    @paulomattos6753 Год назад

    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

  • @alexbecar977
    @alexbecar977 Год назад +1

    What to do when you have multiple consumers of your api like mobile aps?

  • @smash3689
    @smash3689 Год назад

    14:38 so this, to me, sounds similar to what htmx does right? makes a request to server then gets a new html with updated data. Not trying to compare the two, just trying to figure out if i understood this correctly

  • @Adventures_English
    @Adventures_English 9 месяцев назад

    Is it really JSON if the property keys aren't doublequoted?

  • @SquaredbyX
    @SquaredbyX Год назад

    So what about rendering video, say a pexels video on infinite loop(using the html video tag). Even hosted on vercel there are issues loading sometimes. Would server components or ssr/next solve this, or at least change where the issue is met?

  • @emmanuelngene7833
    @emmanuelngene7833 4 месяца назад

    how would all these come into play for a new full stack app with a mobile app as well that needs to make api calls

  • @himanshutripathi7441
    @himanshutripathi7441 Год назад

    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
    .

  • @mishka0
    @mishka0 Год назад

    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?

    • @prawnstars3160
      @prawnstars3160 10 месяцев назад

      yes, but this time it includes mixing of different components and abstracting most of the backend stuff

  • @ddomingo
    @ddomingo Год назад +6

    That’s it… I am going back to PHP.

    • @nameless4014
      @nameless4014 Год назад +1

      only sane comment in this comment section by far.

    • @IvanRandomDude
      @IvanRandomDude Год назад

      Why

    • @MNbenMN
      @MNbenMN Год назад

      Server Components kinda feels like what I used to do with PHP + Ajax (usually with jQuery later ), except there isn't a s much of a gap to fill between server and client with some ad hoc solution ( mind you I'm thinking back to PHP 5.3 mostly. ) It was kinda fun to build out the communications between the front end in the browser, but you only can enjoy reinventing the same wheel so many times before it gets old. Seems like it should be nice to have server and client consistent in one codebase for dev/deployment, but kept appropriately isolated in active use.
      That said, I haven't build a project with react server components, yet, though, so this is just the impression that I get.

  • @venicebeachsurfer
    @venicebeachsurfer Год назад

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

  • @mateh3273
    @mateh3273 Год назад

    How would u work with project that requires the use of context, I don’t think server component is that ready yet.

    • @MNbenMN
      @MNbenMN Год назад

      Does the project require the use of context, or was that an implementation decision based on the tools available at the time? I'm getting the feeling you can still use client side stuff like context and server components, but you just need to separate the concerns of initial loading (rendered by RSC) from the dynamic interactivity that hydrates in client side components. I think its matter of keeping the "what" distinct from the "how" in organizing the design process.

  • @victormustin2547
    @victormustin2547 Год назад

    There is one use case I still don’t know how to handle with server components. Let’s say a user can switch between organizations like in any Saas app. The organization is global and defines all the content we will display. Where do I store which organization the user is logged into ? because if i store it in a context in a state, how does the server component know which data to fetch ?

  • @ricardocnn
    @ricardocnn 10 месяцев назад

    And when will it not be necessary to use a framework to use server components?

  • @PHAL__
    @PHAL__ Год назад

    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

  • @LookRainy
    @LookRainy Год назад

    Someone enlighten me plz, is it correct for me to think of RSC as an on-demand html renderer? So heavy components that depend on a lot of js can be offloaded to RSC? So these components can't be dynamic and interactive right?

    • @yogeshs6605
      @yogeshs6605 Год назад

      Yes, you can't use DOM methods and other interactivity in RSC

  • @adelmae9037
    @adelmae9037 Год назад +1

    we learned nothing from yarn hype its always that

  • @sadkebab
    @sadkebab Год назад

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

  • @joelp6132
    @joelp6132 Год назад

    Web dev peaked with classic asp back in 2007.

  • @faizanahmed9304
    @faizanahmed9304 Год назад

    37:21 I was blown up see those steps.

  • @getrogo4474
    @getrogo4474 Год назад

    idk if i try to understand next13 more i just wanna give up more

  • @iflux8821
    @iflux8821 Год назад +3

    Showing half-working UI to the user before the real thing kicks in is an unfortunate and sad state of modern UI (incl macOS/iOS etc). I hate to be confused and having no idea if it's supposed to be inert, or it's bugged, or it's still loading. But the most hated thing is sudden change of UI elements just before I click on what I see due to JS etc. starting to take over control. There are some games that actually discard user actions for a second before the updated UI becomes active but the majority (looking at you, Apple) is doing this nonsense. Please, stop. I will very much prefer to stair at empty ugly screen than you show me half-functioning UI that will jump all over the screen once everything is loaded. There is probably a way to make SSR right, but most of you won't, so I prefer to wait.

    • @iflux8821
      @iflux8821 Год назад

      But the most ridiculous UI is in Minecraft (at least Xbox version) for already several YEARS. I have no idea what their UX team is doing if they even have one. Crap flies back and forward when the first menu screen gets loaded and they somehow think it's ok. F*ck you, Mojang/Microsoft!

  • @albertgao7256
    @albertgao7256 Год назад

    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.

  • @bronsoncc
    @bronsoncc Год назад +2

    125th

  • @stancobridge
    @stancobridge Год назад

    The explanation is not needed if react is doing what it is meant to do perfectly, building user interfaces.... I believe we need a way to speed up our app which is nice, but the approach nextjs followed in forcing everyone to use server components by default is still a mess

  • @stefanoslalic2199
    @stefanoslalic2199 Год назад

    What's the name of the software for whiteboarding ?

  • @DioArsya
    @DioArsya Год назад

    dang it

  • @TheKennyWorld
    @TheKennyWorld Год назад

    But why use React then?

  • @naromsky
    @naromsky Год назад +1

    Coming from Django: duh.

  • @dagadbm
    @dagadbm 8 месяцев назад

    but you cant use CDNs with this.. so you need to have servers running always.. so i dont think its "always better" if you have millions of clients you need to have more costs in more servers vs using a CDN.
    is this really that black and white?

  • @XavierGoncalves89
    @XavierGoncalves89 Год назад

    Aren't these in beta still?

  • @cagdasucar3932
    @cagdasucar3932 10 месяцев назад

    I don't understand this. Why would it not be possible to use state in SSR? Because state changes? The client side pattern for showing some content that requires some initial data is very straightforward. You render the component initially with a loading progress, call the server API to fetch the data, put it in your state and re-render. Why can't the SSR simply initialize the state in a similar way you execute effect hooks or mount on client? If they could be merged into a new hook that's called in both, that would be the perfect scenario in my book. SSR would also need to send the state to the client, which can be done with a simple script tag next to the component output. I don't understand why you would need server components. To avoid hydration of components? That's like 0.001 ms if you use Preact, which gets rid of the synthetic event system. I mean you did say there are other solutions, but I think the other solutions are better than React server components.

    • @adreto2978
      @adreto2978 8 месяцев назад

      Um SEO? Also javascript build on client can be crazy long - better to fetch data, pre-build then send? Kinda obvious duh?

  • @5ar8n
    @5ar8n Год назад +1

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

  • @pawandeore5115
    @pawandeore5115 10 месяцев назад

    after all this years people implementation php using JS

  • @BobKane-g6x
    @BobKane-g6x Год назад

    20 Megs of JavaScript. OMG..

  • @victorbrown3155
    @victorbrown3155 Год назад

    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?

  • @jorgerangel2390
    @jorgerangel2390 Год назад

    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.

  • @TomershalevMan
    @TomershalevMan Год назад

    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

  • @pablom8854
    @pablom8854 Год назад +1

    2nd

  • @QuintenCoret
    @QuintenCoret Год назад +1

    That's not how you pronounce Comeau.

  • @nameless4014
    @nameless4014 Год назад +1

    react has no business in server side rendering.

  • @faridguzman91
    @faridguzman91 Год назад +11

    this is all so unnecessary to me

    • @vinialves12362
      @vinialves12362 Год назад

      explain

    • @VipulGaur3
      @VipulGaur3 Год назад +2

      You're welcome not to use any of it, React will keep working the way it does right now.

  • @ssthormess
    @ssthormess Год назад

    1st

  • @faridguzman91
    @faridguzman91 Год назад

    ok