Async server components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an async server component in Next.js?

An async server component is a React component that runs on the server and can use async/await to fetch data before rendering. It helps deliver fully rendered HTML to the client for faster load times.

beginner

Why use async server components instead of client components for data fetching?

Async server components fetch data on the server, so the client gets ready-to-use HTML. This reduces client work, improves performance, and avoids loading spinners or empty states on the page.

intermediate

How do you define an async server component in Next.js?

You define it as an async function that returns JSX. For example: <pre>export default async function MyComponent() { const data = await fetch(...); return <div>{data}</div>; }</pre>

intermediate

Can async server components use React hooks like useState or useEffect?

No, async server components run only on the server and do not support client-only hooks like useState or useEffect. Those hooks belong in client components.

beginner

What happens if you try to fetch data inside a client component instead of an async server component?

Fetching data inside a client component happens after the page loads, causing loading states and slower content display. Async server components fetch data before sending HTML, improving user experience.

What keyword do you use to define an async server component in Next.js?

A async function

B class

C useEffect

D render

Async server components are defined as async functions so they can await data fetching before returning JSX.

Where do async server components run?

A Only during build time

B In the browser

C Both server and browser

D On the server

Async server components run only on the server to fetch data and render HTML before sending to the client.

Which React hook is NOT allowed in async server components?

A useContext

B useState

C useCallback

D useMemo

useState is a client-side hook and cannot be used in server components.

What is a main benefit of async server components?

A More client-side JavaScript

B Supports all React hooks

C Faster page load with pre-fetched data

D Runs only in the browser

Async server components fetch data on the server, so pages load faster with ready HTML.

How do async server components improve SEO?

A By sending fully rendered HTML to crawlers

B By hiding content behind JavaScript

C By delaying rendering until client loads

D By using client-side routing only

Fully rendered HTML helps search engines index content better, improving SEO.

Explain how async server components work in Next.js and why they improve performance.

Think about where the data fetching happens and what the client receives.

Describe the difference between async server components and client components in Next.js.

Consider when and where code runs and how it affects the page.