Quiz: Let’s see how well we understand React Server Components.

Here are 12 questions.

Question 1: Can a client component render a server component?

Question 2: Can you create a static site with RSC?

Question 3: Can you query a DB in a RSC?

Question 4: The “use client” directive declares a component as a client component.

Question 5: You can use hooks like useEffect and useState in both server and client components.

Question 6: The “use server” directive declares a server component.

Question 7: Server components can be rendered either static (at compile time) or dynamic (at run time)

Question 8: With RSC, the user sees nothing until the RSC is done fetching all data and fully rendered on the server.

Question 9: In environments that support RSC, components are server components by default.

Question 10: Since server components render on the server, each server component adds no JS to the bundle.

Question 11: Props passed from the Server to Client Components need to be serializable.

Question 12: You can import a server component into a client component.

Answers:
1. A client component can render a server component via a “slot”prop

2. True. You can create a static site with RSC.

3. True. You can query a DB in a RSC.

4. True. The “use client” directive declares a component as a client component.

5. False. You can only use hooks like useEffect and useState in client components.

6. False. The “use server” directive declares a server *action*, NOT a component.

7. True. Server components can be rendered either static (at compile time) or dynamic (at run time).

8. False. With RSC, results are streamed. So the user can see partial results while asynchronous data is loading in a server component.

9. True. In environments that support RSC, components are server components by default.

10. True. Since server components render on the server, each server component adds no JS to the bundle.

11. True. Props passed from the Server to Client Components need to be serializable.

12. False. You can’t import a server component into a client component.

Some people asked what serializable means.

A “serializable” item can be represented via JSON, so it can be sent over the wire and reconstructed on the client.

Non-serializable:
- Functions
- DOM elements
- Date objects
- Map and Set data structures

View original on X