React Server Components
RSC architecture, server vs client components, serialization, streaming, Suspense boundaries
1What is a React Server Component?
What is a React Server Component?
Answer
Server Components are React components that execute only on the server and are never sent to the client. Unlike traditional components, they don't need to be hydrated on the client side, which significantly reduces the JavaScript bundle size. They allow direct access to backend resources (databases, file systems) without exposing secrets or API keys.
2How to declare a Client Component in React?
How to declare a Client Component in React?
Answer
The 'use client' directive placed at the top of a file indicates that the component and all its imported children are Client Components. This directive marks the boundary between server and client code. Without this directive, components are Server Components by default in frameworks that support RSC like Next.js App Router.
3What is the main difference between Server and Client Components?
What is the main difference between Server and Client Components?
Answer
Server Components execute on the server and their code is never sent to the client, while Client Components are sent to the browser and require JavaScript for interactivity. This fundamental distinction affects resource access, bundle size, and interactivity capabilities. Server Components cannot use React hooks or handle user events.
Which React hook can be used in a Server Component?
How to perform data fetching in a Server Component?
+23 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free