Server component execution model in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Server Component in Next.js?

A Server Component is a React component that runs only on the server. It fetches data and renders HTML before sending it to the browser, improving performance and SEO.

beginner

How does the Server Component execution model improve app performance?

By running components on the server, it reduces JavaScript sent to the client, speeds up page load, and allows data fetching without blocking the UI.

beginner

Where does the Server Component code run in Next.js?

Server Component code runs only on the server during the rendering phase. It never runs in the browser.

intermediate

What happens when a Server Component fetches data?

The data is fetched on the server before rendering. The server sends fully rendered HTML to the client, so the browser shows content immediately.

intermediate

Can Server Components use React hooks like useState or useEffect?

No. Server Components cannot use client-only hooks like useState or useEffect because they do not run in the browser.

Where does a Next.js Server Component run?

A Both server and browser

B Only in the browser

C Only on the server

D On the client side only

Server Components run only on the server during rendering.

What is a key benefit of Server Components in Next.js?

A They reduce JavaScript sent to the client

B They allow useState on the server

C They run faster in the browser

D They replace API routes

Server Components reduce client JavaScript by rendering on the server.

Can Server Components use useEffect hook?

A Yes, always

B No, because they don't run in the browser

C Only with special flags

D Only in development mode

useEffect runs in the browser, but Server Components run only on the server.

How does data fetching work in Server Components?

A Data is fetched on the server before rendering

B Data is fetched after the page loads in the browser

C Data fetching is not allowed

D Data is fetched using client-side hooks

Server Components fetch data on the server before sending HTML to the client.

What does the browser receive from a Server Component?

A No content until client runs code

B Raw React code

C Only JavaScript

D Fully rendered HTML

The browser receives fully rendered HTML from Server Components for faster display.

Explain how the Server Component execution model works in Next.js and why it improves performance.

Think about where the code runs and what the browser receives.

Describe the limitations of Server Components regarding React hooks and client-side interactivity.

Consider what hooks need the browser environment.