Modern React with Server Components
React 18, Server Components, Suspense, and the new mental model for building apps.
What you’ll learn
- The Server Components mental model and when to opt into client rendering
- Data fetching with Suspense and streaming
- Building a real app with Next.js App Router
- Migrating from the Pages Router without losing your mind
- Performance patterns for real-world apps
About this course
React Server Components are the biggest shift in React’s mental model since hooks. This course teaches you the new model, how to decide what runs on the server vs the client, and how to build a real app using the Next.js App Router. We migrate a real Pages-router app so you can see the patterns and the gotchas.
Curriculum
8 modules · 68 lessons · 22h
1The new React mental model
2 lessons
The new React mental model
2 lessons
Why Server Components change everything you know about React.
- Client vs Server ComponentsPreview20 min
- When to use "use client"Preview15 min
2Data fetching with Suspense
2 lessons
Data fetching with Suspense
2 lessons
The new data loading patterns.
- Suspense boundaries explained18 min
- Streaming responses22 min
Requirements
- Solid JavaScript and React fundamentals
- Some experience with Next.js or another React framework
- Understanding of async/await
Who this course is for
- React developers migrating to the App Router
- Full-stack engineers building Next.js apps
- Anyone confused about Server Components and wanting clarity
Your tutor
Engineering Manager at Zomato · Gurugram
Full-stack engineer turned manager. Shipped the Zomato ordering rewrite and the Hyperpure B2B platform. Teaches React and Node with the pragmatism of someone who has been on call for both.
Student reviews
4.7
187 ratings
Karthik Venkatesh
20 Aug 2024
Cleared up all my confusion
I had read every Server Components blog post and was still confused. Rohan’s migration walkthrough made it click. The mental model section is gold.
Sneha B
5 Aug 2024
Great, but needs an update for Next.js 15
The content is excellent but some of the caching behaviour changed in Next.js 15. Still very much worth it for the mental model alone.
Frequently asked questions
Do I need to know the Pages Router first?
Is this course kept up to date?
More in Software Engineering
System Design for Working Engineers
Distributed systems, tradeoffs, and the interview room — taught by a staff engineer who actually does this.
By Ananya Iyer
Production Node.js at Scale
Backend architecture, observability, and the unglamorous parts that keep you up at night.
By Vikram Nair
TypeScript for Working Developers
Generics, inference, and the type system patterns you actually use.
By Rohan Kapoor