Theo Brandt
Reading the payload by hand in lesson two rewired how I think about the boundary. Everything after that felt obvious, which is the mark of a good explanation.
FrontendAdvanced
React Server Components, Properly
The boundary, the payload and the render — what actually happens between the server and the browser.
Free preview · 25 min
$99
30-day money-back guarantee
Includes
- 9 hours of video
- 5 hands-on projects
- Payload inspection tooling
- Lifetime access
- Certificate of completion
48% of the running time is hands-on — projects and quizzes rather than video.
What you'll learn
Explain the boundary exactly
Describe what a client boundary is precisely enough to place one on purpose rather than by trial and error.
Read the RSC payload
Open the wire format and see exactly what crossed it.
Compose without prop-drilling
Use children as the escape hatch, so server data does not have to be threaded through every client component.
Avoid the data waterfall
Get server data into client state in one round trip, with promises as props and use().
Spot accidental client trees
Four common patterns quietly turn a whole subtree into client code. Learn to recognise all four on sight.
What’s inside
Every figure below is summed from the lesson list, not estimated — so the chart and the curriculum can never disagree.
| Content type | Minutes | Share |
|---|---|---|
| Video lessons | 325 | 52.3% |
| Hands-on projects | 273 | 43.9% |
| Quizzes | 24 | 3.9% |
48% of this course is hands-on.
Curriculum
4 sections · 16 lessons · 10h total
What a server component is, stated exactly once and precisely.
- VideoTwo renders, one tree
- VideoReading the RSC payload by hand
- VideoSerialisation: what can cross the boundary
- QuizModel quiz
Keeping the client bundle small without contorting the code.
- Videochildren as the escape hatch
- VideoThe four accidental client trees
- VideoContext in a server-first app
- ProjectProject: cut a bundle in half without removing a feature
Server data reaching client state without a waterfall.
- VideoHoisting fetches above the boundary
- VideoPromises as props, and use()
- VideoOptimistic updates that reconcile honestly
- ProjectProject: a live-updating table
- QuizData flow quiz
Hydration, third-party libraries and the errors with unhelpful messages.
- VideoHydration mismatches: finding the real cause
- VideoWrapping a library that has never heard of RSC
- ProjectCapstone: audit and re-architect a client-heavy app
Your instructor
Maya Okonkwo
Principal engineer · ex-platform lead at Northwind
Maya has spent eleven years on the boring half of frontend: the render path, the cache, the deploy. She teaches the way she reviews code — by asking what happens on the slow connection, on the old phone, on the day the API is down. Her courses ship a real repository, not a starter kit, and every lesson ends with something running.
Joined Northwind Commerce
CompletedBuilt the checkout that still handles 40k orders an hour.
Platform lead
CompletedMoved 240 engineers onto a single React build without a freeze week.
Independent
CompletedConsulting on render performance for retail and media teams.
First course on SkillForge
In progress31,000 learners and a 4.8 average across three titles.
Reviews
What learners said
1,974 ratings from people who bought this course.
4.7
1,974 ratings
- 5 stars
- 4 stars
- 3 stars
- 2 stars
- 1 star
Nadia Rahman
The "four accidental client trees" lesson found three of them in our codebase within an hour. Genuinely advanced material, and it assumes you can already write React well — which I appreciated.
Owen Fitzgerald
Dense in the best way, but pace yourself — I tried two modules in an evening and retained none of it. Second pass at half speed was much better.
Learners also took
Same category first, then whatever pairs well with it.
FrontendTypeScript for Teams
Types that catch real bugs and stay out of the way — for codebases with more than one author.
10h18 lessonsIntermediate
Full-stackShip It: Next.js 16 from Zero to Production
Build and deploy a real application on the App Router — async request APIs, streaming, caching and the deploy that follows.
15h25 lessonsIntermediate
DesignCSS Without a Framework
Modern layout, custom properties and container queries — the browser is the framework now.
8h17 lessonsBeginner
Browse the full course catalogue, or see how this page is put together on Built with VivekUI.