02 / 06

What is the use of async in server components?

Difficulty: 5/10
data fetching, concurrency, streaming

When you await in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.

You can even create a promise on the server, and await it on the client:
Client component:

Scenario Questions

0-2 years experience

  1. 1You need to display a list of recent posts in a Server Component. How would you use async/await to fetch the posts, and what does the component render while the fetch is in progress?
  2. 2If you call a function that returns a promise inside a Server Component but forget to mark the component as async, what error or behavior would you see at runtime?

2-5 years experience

  1. 1Your Server Component calls two external APIs with Promise.all inside an async function, but occasionally the page never finishes loading. Walk me through how you would investigate and fix the issue.
  2. 2Explain why you might choose to keep data fetching inside the Server Component versus delegating it to a separate service layer. What trade‑offs does async introduce?

5-8 years experience

  1. 1Design a product‑detail page that streams a large JSON payload using an async Server Component. How would you structure the component to start streaming early, and what caching considerations would you apply?
  2. 2When integrating async Server Components into a micro‑frontend architecture, how do you handle error boundaries and fallback UI across component boundaries?

8+ years experience

  1. 1Your organization is migrating hundreds of client components to Server Components. How would you create a migration plan that standardizes async data fetching to minimize latency and technical debt?
  2. 2Discuss the cross‑team guidelines you’d establish for using async in Server Components, especially around streaming, suspense, and SSR cache invalidation.

Follow-up Questions

  • What happens if an async Server Component throws an error?
  • How does React treat async Server Components differently from client components during hydration?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.