KZhead
Ғылым және технология

Write React Server Components from Scratch

Tejas Kumar
2024 ж. 20 Мам.
8 377 Рет қаралды
Жүктеу

- Dan's post that inspired this: github.com/reactwg/server-com...
- Repo: github.com/TejasQ/react-serve...
- Creating Next.js from Scratch: • Makeshift Next.js from...
Thank you to CrabNebula for sponsoring this video: crabnebula.dev
In this tutorial, we'll construct React server components from scratch using TypeScript, kind of mimicking Next.js app router. This effort is a cornerstone for understanding the mechanism behind React's component lifecycle, state management, and data fetching primitives.
Please note that this is a streamlined, barebones model that takes a significant number of shortcuts and isn't fully representative of the complete, in-depth implementation. It's designed to give you a working knowledge of React and Next.js, allowing you to comprehend the operations occurring behind the scenes. This should teach you how server components *works*, not how to use server components.
Throughout this guide, we will delve into the creation of React server components, exploring rendering them on the server and sending them to clients. By the end, you'll gain a foundational understanding of underlying mechanisms and applying it to your existing knowledge of JavaScript.
This knowledge forms a valuable foundation for your future endeavors in React-based web application development. Remember, our main goal here is to boost your comprehension of React server components, using TypeScript and Next.js as tools for practical learning.
Chapters
00:00 Intro
01:37 Sponsor
02:31 React as an architecture
05:48 What is React Server Components (RSC)?
08:17 Building a Sample Application
11:38 Adding Server Rendering
14:50 Creating Server Components
16:28 Rendering Server Components
24:49 Persisting State with Client-side React
33:16 RSC and CSR and SSR
34:57 Tools for Adopting RSCs
37:35 React is a Community

Пікірлер

  • Your long form videos are awesome. They allow to really understand how React works and what RSC brings to the table. I couldn't help smiling when you said functions are not serializable. As I know you're also into Qwik and that the Qwik team managed to make functions serializable, it's funny to see that you're able to stay in the context of each lib / framework. If you could explain how they did that (making functions serializable) it could become another great video of yours. Even a great collab with a member of the Qwik team. Time for me to watch your 'deconstructing React' video ;)

    @codeconcept@codeconcept10 ай бұрын

    • Hey thank you so much for this thoughtful comment!!

      @tejask@tejask10 ай бұрын

  • This video is underrated. You should make mini powerful shorts by splitting this so its a little more digestible. I bet you 8/10 next devs have no clue what they are doing

    @BuddhiAbeyratne@BuddhiAbeyratne10 ай бұрын

  • Amazing video my friend. I’m so happy that you made this video. You’re very talented at explaining these things. It’s apparent that you know what you’re talking about.

    @Sindoku@Sindoku6 ай бұрын

    • I appreciate that!

      @tejask@tejask6 ай бұрын

  • Seeing how to implement RSCs yourself is incredibly educational. Would love to see more of these in-depth hands-on videos on concepts like Server Actions, Suspense, Caching/Revalidating etc. Thank you for this!

    @pplytas@pplytas10 ай бұрын

    • My pleasure

      @tejask@tejask10 ай бұрын

  • Deeeeeep knowledge. Thanks for making these videos and diving deep into the React core.

    @mohsenghaemmaghami6692@mohsenghaemmaghami66929 ай бұрын

  • You are a great teacher and fluent

    @fintechtelugu6980@fintechtelugu69806 ай бұрын

    • Thanks

      @tejask@tejask6 ай бұрын

  • Really liked the video, it is great that you break down concepts. I may not understand everything, but fundamentally understood a lot of things. Thanks for making this video, keep coming up with good stuff.

    @pranab091@pranab09110 ай бұрын

    • Thank you so much! Happy to clarify anything you didn’t understand!!

      @tejask@tejask10 ай бұрын

  • You are awesome Tejas. Please don’t change always teach like you do. Love you bro ❤

    @aamiramin6112@aamiramin61128 ай бұрын

  • You are a hero :) Keep it up sirrrr 😊

    @naufalnasrullah6965@naufalnasrullah69658 ай бұрын

  • I share it on my Likedin, I found out this is one of the greatest explanation about this topic.

    @git-sujon@git-sujon3 ай бұрын

  • Legend, great speach in Zadar, hope to see you next year too! :)

    @marioseider70@marioseider708 ай бұрын

  • Very good video, as always. Learned a lot with it. Thanks a lot for all this great learning content!

    @vinassefranche@vinassefranche10 ай бұрын

    • Thank you so much!!!

      @tejask@tejask10 ай бұрын

  • Great job Tejas , awesome video ... tks a lot !! I was listening to your podcast ep about zod and trpc ... you are a really rockstar 🎉

    @rockNbrain@rockNbrain10 ай бұрын

    • Thank you!

      @tejask@tejask10 ай бұрын

  • bro, please make a web dev course with all the knowledge and industry experience u have , We will buy 🔥

    @ru2979@ru29798 ай бұрын

  • Great Video Tejas, I love your approach on this.

    @JustSall@JustSall10 ай бұрын

    • Hey thanks a lot!!

      @tejask@tejask10 ай бұрын

  • Great video, Tejas! Thanks!

    @ianare@ianare10 ай бұрын

  • Nice video. Learnt a bunch. 🙏Thanks. But how do you test a react server component?

    @arjunlubana9720@arjunlubana97207 ай бұрын

  • love this guy

    @zach4216@zach42168 ай бұрын

  • Great video, thank you! I have a question, how can two child components communicate with each other as leaf nodes of a server component?

    @henryfeng6300@henryfeng63009 ай бұрын

  • This has been truly useful! Everyone talks about meta frameworks and server components togather, so it's hard to understand the core principles in isolation. Your video helped me greatly with that. I wonder though if all server components need to be hydrated 🤔. I guess there's nothing stopping us from writing some application/meta-framework logic that mounts multiple react roots inside a given html output from the server. That's probably how ASTRO islands work, right?

    @vlad.nicula@vlad.nicula9 ай бұрын

  • Gold content Tejas please bring more of these as we don't get it anywhere else. Also I would be great if you can share how you learn about all this building things from scratch

    @pratiktiwari5689@pratiktiwari568910 ай бұрын

    • Hey thanks! In this case, I just read Dan’s post.

      @tejask@tejask10 ай бұрын

    • @@tejask makes sense ill follow dan’s work closely and try to learn more of these. Also giving talk similar to what you showed about building ssr and file based routing at a local meetup of react Pune really excited to show people how these things work. Thanks for all the effort bringing these content.

      @pratiktiwari5689@pratiktiwari568910 ай бұрын

  • React is a framework, mate. It controls the flow of your program, following 'The Hollywood Principle.

    @mehdi-vl5nn@mehdi-vl5nn8 ай бұрын

  • You're skills on deconstructing these nuanced complex topics are so brilliant! Keep it up sir! What would you suggest a dev could do to gain in-depth knowledge of these new patterns and React/frontend in general? Thanks :)

    @aakarshan4644@aakarshan464410 ай бұрын

    • Subscribe to the channel and ask me to clarify things?

      @tejask@tejask10 ай бұрын

    • I would love to know how nextjs and these metaframeworks do their cache system

      @rockNbrain@rockNbrain10 ай бұрын

  • High quality stuff !! 🔥🔥

    @abhinavkant@abhinavkant10 ай бұрын

    • Thanks!!

      @tejask@tejask10 ай бұрын

  • Great explanation. Thanks for doing this.

    @anilchaudhary2964@anilchaudhary296410 ай бұрын

    • My pleasure!!

      @tejask@tejask10 ай бұрын

  • How would this look like if we introduced a client component? Lets say we have a single button component with an onClick prop. How does the serialization proceed with that? Is there a placeholder for it or something similar? Essentially that serialized object will be parsed by the server to generate html and html for the button will be there. So I am wondering how serialization looks like when we mix client/server components

    @tosheen20@tosheen206 ай бұрын

  • Thanks! great content, learned a lot.

    @technologeek360@technologeek36010 ай бұрын

    • Thank you as well for your support!!

      @tejask@tejask10 ай бұрын

  • Thank you Tejas 🙏🚀

    @crabnebula-dev@crabnebula-dev10 ай бұрын

    • Thank you!

      @tejask@tejask10 ай бұрын

  • Thank you Tejas for another Gem

    @ameencharoliya4643@ameencharoliya464310 ай бұрын

    • Happy to serve you!!

      @tejask@tejask10 ай бұрын

  • Amazing!!! you are the best!

    @dariocoronel4040@dariocoronel404010 ай бұрын

  • is it production ready now ? as with next 13.4 app router is stable and RSC are default with app router ?

    @ambargupta5991@ambargupta59919 ай бұрын

    • It is nit

      @tejask@tejask9 ай бұрын

    • Not

      @tejask@tejask9 ай бұрын

  • RSC (React Server Components) is a solution looking for a problem. I wish the Next.js people would just fork the project and "fork off", let React be useful the way it already is as a View / Frontend / Client library. /end of rant.

    @joe-sydney-au@joe-sydney-au8 ай бұрын

  • Can we please get more react stuff please.

    @prashlovessamosa@prashlovessamosa5 ай бұрын

  • LMAO, this basically renders part of my React India proposal pointless. I could just link them to this video and they'll get similar (probably better) value. Another good one, Tejas!

    @saurav_varma@saurav_varma10 ай бұрын

    • Still do the talk!!!!!

      @tejask@tejask10 ай бұрын

    • I was just here telling people how the 1mg team is the best.

      @tejask@tejask10 ай бұрын

    • @@tejask I still need to show you what we’re working on. Only if I manage to incorporate RSC into it by React India

      @saurav_varma@saurav_varma10 ай бұрын

    • @@tejask Also you’re just too generous man.

      @saurav_varma@saurav_varma10 ай бұрын

  • 16:22

    @leebobtheblob87@leebobtheblob878 ай бұрын

  • React is a framework, not a library. If react is a library, then why do I think to structure my entire repo around it? d3 is a library. I don’t have to structure my repo around it. I can use its functions and objects where I need, regardless of what framework I’m using. React is not a library. This is such a weird propaganda that react pushes for some reason.

    @hamm8934@hamm89349 ай бұрын
KZhead