Question 1

What are React Server Components?

Accepted Answer

React Server Components (RSC) are a new type of React component that renders exclusively on the server. They can directly access backend resources, reduce JavaScript bundle size, and improve initial page load performance by sending only HTML to the client.

Question 2

What is the difference between Server Components and Client Components?

Accepted Answer

Server Components render on the server, have no JavaScript bundle, and can access databases directly. Client Components render on the client, support interactivity with hooks like useState and useEffect, and are marked with 'use client' directive.

Question 3

What is the 'use client' directive in React?

Accepted Answer

The 'use client' directive marks a component and its imports as Client Components. It must be placed at the top of the file before any imports. Components without this directive are Server Components by default in frameworks like Next.js App Router.

Question 4

What is the 'use server' directive in React?

Accepted Answer

The 'use server' directive marks functions as Server Actions, allowing them to be called from Client Components but executed on the server. It enables form handling and data mutations without API endpoints.

Question 5

Can Server Components use useState or useEffect?

Accepted Answer

No, Server Components cannot use useState, useEffect, or any client-side hooks because they don't run on the client. For interactive features, you must use Client Components marked with 'use client'.

Question 6

What is the RSC payload?

Accepted Answer

The RSC payload is a special data format that React uses to stream Server Component output to the client. It contains rendered component tree data, references to Client Components, and props passed between server and client boundaries.

Question 7

How do you fetch data in Server Components?

Accepted Answer

Server Components can use async/await directly in the component body to fetch data. You can call databases, APIs, or file systems without useEffect or client-side data fetching libraries, making data fetching simpler and more efficient.

Question 8

What are Server Actions in React?

Accepted Answer

Server Actions are async functions marked with 'use server' that run on the server but can be triggered from Client Components. They handle form submissions, data mutations, and server-side operations with automatic progressive enhancement.

Question 9

How do Server Components improve performance?

Accepted Answer

Server Components reduce JavaScript bundle size by keeping component code on the server, enable streaming for faster Time to First Byte, and eliminate client-side data fetching waterfalls by fetching data directly where it's needed.

Question 10

What is zero-bundle-size in Server Components?

Accepted Answer

Zero-bundle-size means Server Components don't add to the client JavaScript bundle. Their code and dependencies stay on the server, allowing use of large libraries without impacting client performance or load times.

Question 11

How do you compose Server and Client Components together?

Accepted Answer

Pass Server Components as children or props to Client Components. The 'children' pattern lets you wrap Server Components in Client Components for interactivity while keeping server rendering benefits for the nested content.

Question 12

What is the default component type in Next.js App Router?

Accepted Answer

In Next.js App Router, all components are Server Components by default. To create a Client Component, you must add 'use client' at the top of the file. This maximizes server-side rendering benefits automatically.

Question 13

How does streaming work with React Server Components?

Accepted Answer

Streaming allows the server to progressively send rendered HTML as components complete. Combined with Suspense boundaries, streaming shows content incrementally, improving perceived performance for users with slow connections.

Question 14

What are common mistakes with React Server Components?

Accepted Answer

Common mistakes include: using client hooks in Server Components, importing Server Components into Client Components, passing non-serializable props across boundaries, and not understanding the component hierarchy constraints.

Question 15

What frameworks support React Server Components?

Accepted Answer

Next.js App Router has full RSC support since version 13. Other frameworks exploring RSC include Remix, Gatsby, and experimental implementations in Vite. The React team provides reference implementations for framework authors.

React Server Components Fundamentals(6 questions)

What are React Server Components and how do they differ from traditional React components?

What is the difference between Server Components and Client Components?

How do you mark a component as a Client Component in React?

What are the benefits of using React Server Components?

What is the "use client" directive and when do you need it?

What is the "use server" directive and what does it enable?

Server Components Architecture(4 questions)

How does the React Server Components architecture work?

What is the RSC payload and what does it contain?

How do Server Components communicate with the client?

How does streaming work with React Server Components?

Data Fetching(6 questions)

How do you fetch data in React Server Components?

What is the difference between fetching data in Server Components vs Client Components?

Can you use async/await directly in Server Components?

How do you handle loading states when fetching data in Server Components?

What is the relationship between Server Components and Suspense?

How do you implement parallel data fetching in Server Components?

Component Composition(5 questions)

How do you compose Server and Client Components together?

What is the "children" pattern for mixing Server and Client Components?

How do you pass Server Components as props to Client Components?

What are the restrictions on props passed from Server to Client Components?

Can you import Server Components into Client Components?

State and Interactivity(4 questions)

Can Server Components have state using useState or useReducer?

How do you handle user interactions in a Server Components architecture?

What React hooks can you use in Server Components?

How do you handle forms with Server Components and Server Actions?

Performance(4 questions)

How do React Server Components improve performance?

What is zero-bundle-size components and how do Server Components achieve it?

How do Server Components reduce JavaScript bundle size?

What are the best practices for code splitting with Server Components?

Server Actions(6 questions)

What are Server Actions in React?

How do you define a Server Action?

Can Server Actions be called from Client Components?

How do you handle errors in Server Actions?

What is progressive enhancement with Server Actions?

How do you revalidate data after a Server Action?

Framework Integration(3 questions)

How does Next.js App Router implement React Server Components?

What is the default component type in Next.js App Router?

How does Next.js handle Server Component caching?

Common Patterns and Best Practices(4 questions)

When should you use a Server Component vs a Client Component?

What are common mistakes when working with React Server Components?

How do you debug Server Components?

How do you handle authentication and authorization with Server Components?

Migration and Adoption(3 questions)

How do you migrate an existing React application to use Server Components?

What are the challenges when adopting React Server Components?

What tools and frameworks support React Server Components?