From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Client components and server components

Client components and server components

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Client components and server components

“

Hello! In this session, you'll dive deep into one of the most powerful features of the Next.js app router – server components and client components. My goal is to help you understand the fundamental differences between them, learn the best practices for deciding when to use each type, and see how this choice directly impacts your application's performance, and user interactivity. By the end, you'll be able to architect your Next.js applications more effectively, creating faster, more efficient, and highly interactive user experiences. Our Courses page component is a server component. By default, all components in the Next.js app router are server components. Inside GetCourses, I'm using Fetch to get data directly from an API endpoint. This is a major benefit of server components. You can perform data fetching, access databases, or use server-only libraries right inside your component, without ever exposing that logic to the client's browser. Then in the CoursesPage component, I simply…

Contents