Write React Server Components from Scratch

- 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

[@codeconcept]

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 ;)

[@tejask]

Hey thank you so much for this thoughtful comment!!

[@BuddhiAbeyratne]

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

[@Sindoku]

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.

[@tejask]

I appreciate that!

[@pplytas]

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!

[@tejask]

My pleasure

[@fintechtelugu6980]

You are a great teacher and fluent

[@tejask]

Thanks

[@pranab091]

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.

[@tejask]

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

[@git-sujon]

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

[@mohsenghaemmaghami6692]

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

[@vinassefranche]

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

[@tejask]

Thank you so much!!!

[@pratiktiwari5689]

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

[@tejask]

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

[@pratiktiwari5689]

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

[@rockNbrain]

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

[@tejask]

Thank you!

[@JustSall]

Great Video Tejas, I love your approach on this.

[@tejask]

Hey thanks a lot!!

[@aamiramin6112]

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

[@ianare]

Great video, Tejas! Thanks!

[@marioseider70]

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

[@aakarshan4644]

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 :)

[@tejask]

Subscribe to the channel and ask me to clarify things?

[@rockNbrain]

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

[@vlad.nicula]

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?

[@anilchaudhary2964]

Great explanation. Thanks for doing this.

[@tejask]

My pleasure!!

[@naufalnasrullah6965]

You are a hero :) Keep it up sirrrr 😊

[@abhinavkant]

High quality stuff !! 🔥🔥

[@tejask]

Thanks!!

[@ru2979]

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

[@technologeek360]

Thanks! great content, learned a lot.

[@tejask]

Thank you as well for your support!!

[@ameencharoliya4643]

Thank you Tejas for another Gem

[@tejask]

Happy to serve you!!

[@arjunlubana9720]

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

[@crabnebula-dev]

Thank you Tejas 🙏🚀

[@tejask]

Thank you!

[@henryfeng6300]

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

[@dariocoronel4040]

Amazing!!! you are the best!

[@zach4216]

love this guy

[@tosheen20]

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

[@mehdi-vl5nn]

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

[@ambargupta5991]

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

[@tejask]

It is nit

[@tejask]

Not

[@saurav_varma]

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!

[@tejask]

Still do the talk!!!!!

[@tejask]

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

[@saurav_varma]

@@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]

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

[@prashlovessamosa]

Can we please get more react stuff please.

[@joe-sydney-au]

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.

[@leebobtheblob87]

16:22

[@hamm8934]

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.