g.grow.

Web Development Lesson 2 of 4

Server Components vs Client Components in Next.js

28:30 Modern Frontend Architecture with React & Next.js

Demystify 'use client'. Learn when to execute code exclusively on the server to keep client bundles lean and secure.

Lesson notes

In modern Next.js, components are Server Components by default. They can directly access databases, file systems, and secret environment variables without exposing sensitive logic to browser dev tools.

What you'll learn

  • React Server Components (RSC) ship zero JavaScript to the client
  • Pushing 'use client' directives to the leaves of your component tree
  • Streaming HTML with React Suspense for instant First Contentful Paint

1. When to Use 'use client'

Only add `'use client'` when a component requires browser event listeners (`onClick`, `onChange`), React hooks (`useState`, `useEffect`), or browser-only APIs (`localStorage`, `window`).