When to keep components on server 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 can fetch data and render HTML before sending it to the browser, improving performance and SEO.

beginner

Why keep components on the server in Next.js?

Keeping components on the server helps reduce JavaScript sent to the browser, speeds up page load, and improves SEO by rendering content before it reaches the user.

intermediate

When should you NOT keep a component on the server?

If a component needs to handle user interactions like clicks or form inputs, it should be a client component because server components cannot handle browser events.

intermediate

How do server components affect data fetching?

Server components can fetch data directly on the server without extra client requests, making data loading faster and simpler.

beginner

What is a good real-life example to keep a component on the server?

A blog post list that shows many articles can be a server component because it only needs to display data and does not require user interaction.

Which of these is a reason to keep a component on the server in Next.js?

A To manage local component state

B To handle button clicks in the browser

C To add animations on the client side

D To improve SEO by pre-rendering content

Server components help improve SEO by rendering HTML on the server before sending it to the browser.

What happens if you try to use browser events in a server component?

A It runs faster

B It works normally

C It causes an error or does not respond

D It automatically converts to a client component

Server components cannot handle browser events like clicks because they run only on the server.

Which component type fetches data directly on the server in Next.js?

A Server component

B Neither

C Both client and server components

D Client component

Server components can fetch data on the server, reducing client requests.

When should you choose a client component over a server component?

A When you want to improve SEO

B When you need user interaction like forms

C When you want faster server rendering

D When you want to reduce JavaScript size

Client components are needed for user interactions like forms and clicks.

What is a benefit of server components in Next.js?

A They reduce JavaScript sent to the browser

B They slow down page load

C They increase JavaScript bundle size

D They require client-side data fetching

Server components reduce the JavaScript sent to the browser, improving performance.

Explain when and why you should keep components on the server in Next.js.

Think about performance and user interaction needs.

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

Focus on where the code runs and what it can do.