Server component restrictions in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a key restriction of Next.js Server Components regarding browser APIs?

Server Components cannot use browser-only APIs like window, document, or localStorage because they run on the server, not in the browser.

beginner

Can Server Components in Next.js use React hooks like useState or useEffect?

No, Server Components cannot use client-only React hooks such as useState or useEffect because they do not run in the browser and have no state or lifecycle.

intermediate

Why can't Server Components import client components directly in Next.js?

Server Components can import client components, but client components must be marked with <code>"use client"</code>. This keeps server and client code separate.

beginner

What kind of data fetching is recommended inside Next.js Server Components?

Server Components can fetch data directly using async/await because they run on the server, allowing secure and fast data fetching without exposing secrets to the client.

beginner

Explain why Server Components cannot have event handlers like onClick.

Event handlers like onClick require client-side JavaScript to run. Server Components render HTML on the server and do not handle client events, so event handlers must be in Client Components.

Which of the following is NOT allowed inside a Next.js Server Component?

A Rendering JSX

B Fetching data with async/await

C Using <code>window</code> object

D Importing other Server Components

Server Components run on the server and cannot access browser-only objects like window.

Can you use React's useState hook inside a Server Component?

A No, never

B Only if marked with "use client"

C Yes, always

D Only in Next.js 12

useState is a client-side hook and cannot be used in Server Components.

How do you mark a component as a Client Component in Next.js?

A Use <code>React.useClient()</code>

B Add <code>"use client"</code> at the top of the file

C Name the file with .client.js extension

D Wrap component in <Client> tag

Adding "use client" at the top tells Next.js this component runs on the client.

Why can't Server Components handle user events like clicks?

A They don't render HTML

B They only handle data fetching

C They are deprecated

D They run only on the server without client JavaScript

Server Components do not run in the browser, so they cannot handle client-side events.

Which is a benefit of Server Components in Next.js?

A They enable secure server-side data fetching

B They run faster in the browser

C They replace Client Components completely

D They allow direct access to browser APIs

Server Components run on the server, so they can fetch data securely without exposing secrets.

Describe the main restrictions of Next.js Server Components and why they exist.

Think about where Server Components run and what that means for code they can use.

Explain how Server Components and Client Components work together in Next.js.

Consider the roles of server and client in a web app.