What is the use of async in server components?

Q: What is the use of async in server components?

// Server Component import db from './database'; async function Page({id}) { // Will suspend the Server Component. const note = await db.notes.get(id); // NOTE: not awaited, will start here and await on the client. const commentsPromise = db.comments.get(note.id); return ( {note} Loading Comments... }> ); } // Client Component "use client"; import {use} from 'react'; function Comments({commentsPromise}) { // NOTE: this will resume the promise from the server. // It will suspend until the data is available. const comments = use(commentsPromise); return comments.map(commment => {comment} ); }

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

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?
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

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?