React Server Components Deep Dive
Published by O'Reilly Media, Inc.
How to leverage server-side rendering and Server Components to build efficient web applications
Course outcomes
- Understand the new architecture and core concepts of React Server Components (RSC)
- Learn how to start new React applications (in Next.js 13+) to use RSC for better efficiency, following best practices
- Implement RSC in projects to improve page load performance and reduce bundle size
- Acquire knowledge about how React Server Components work under the hood
Course description
Expert Kawtar Choubari offers a deep dive into the technical aspects of React Server Components, a significant update in React 18, for both seasoned React developers and newcomers. You’ll explore the shift toward server-side rendering (SSR) and how RSC optimizes web application performance and bundle size. You’ll learn how to upgrade old applications or start new projects using this architecture. If you aim to work with the latest React versions and frameworks like Next.js 13+, you’ll need to master SSR with React.
What you’ll learn and how you can apply it
- Navigate the transition from client-side rendering to server-side rendering in React
- Learn how to implement and use Server Components in React projects, and how React Server Components work with server-side rendering
- Employ RSC to significantly reduce web app load time and bundle size
- Explore use cases and pros and cons of Server Components
- Use React Server Components with Next.js 13+
This live event is for you because...
- You’re a React, Next.js, frontend, or full stack developer.
- You work with React, Next.js, Remix, Vite, JavaScript, or TypeScript.
- You want to become fluent in server-side rendering and how to use it with React.
- You want to use React 18’s new architecture or the new Next.js app router.
- You’re looking to optimize your web applications for speed and efficiency.
- You’re looking for alternatives to client-side rendering.
Prerequisites
- A computer with a text editor or IDE (such as VS Code) ready for development work
- Access to a web browser for testing and viewing React applications
- A GitHub account for version control and to access the course's demo code repository
- Familiarity with command line tools for running development servers and installing packages
- Fundamental knowledge of React, including components, state, and props
- Basic understanding of rendering strategies like client-side and server-side
- Familiarity with JSX, HTML, CSS, and JavaScript
- Knowledge of Next.js is not required, but nice to have
Recommended follow-up:
- Read Fluent React (book)
- Read Use React, Redux, and Next to Build Full Server-Side Rendering Applications (book)
- Explore Official Next.js Tutorial Code Along–React Web Development (on-demand course)
- Read Learning React, second edition (book)
Schedule
The time frames are only estimates and may vary according to how the class is progressing.
React Server Components (160 minutes)
- Presentation: The shift in web development from client-side to server-side rendering; understanding the new architecture; identifying performance issues (the need for RSC); limitations and current state of React Server Components
- Demonstration: Implementing React Server Components in Next.js
Wrap-up and Q&A (20 minutes)
Your Instructor
Kawtar Choubari
Kawtar Choubari is a software engineer with a passion for frontend development, which shines through her expertise in JavaScript, TypeScript, React JS, and Next.js. She’s also a part-time content creator, YouTuber, and open source contributor, creating educational content that reflects her love for frontend technologies. Dedicated to community enrichment, she contributes to tech events and delivers impactful workshops and hands-on labs.