Demystify React Server Components

I(JSer) wanted to figure out how React Server Components works internally, so built this demo to have a guess at the implementation.

1. ⚠️ This is just a demo of the rough ideas, only for learning purpose. It is NOT exactly how RSC actual works!
2. I will dive into the actual implementation and put what learn on React Source Code Walkthrough

About this demo.

I'll build the React Server Component demo from scratch with a few milestones to see the rationale behinde the idea. It should be easy to follow.

You can:

1. clone the repo and check out at target commit > npm start and there you go.
2. or just click the stackblitz link in table below.

episode	pr	commit	stackblitz
1 - Issues of client-side rendering	pr	953cba4
2 - Manually split component into client part & server part	pr	f474309
3 - Render Client Components in Server Components	pr	d97313d
4 - Automatically build Server Components	pr	26c0a72
5 - Support nested Server Components & Suspense	pr	1953634
6 - Render Server Components and stream down response	pr	48cfbd6	(There seems to be some issue on stackblitz, recommend run this demo locally)

Blogs & Youtube

https://jser.dev/react/2023/04/10/guess-rsc.html