Why server components are the default in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why are Server Components the default in Next.js?

Next.js uses Server Components as the default for rendering. What is the main reason for this choice?

A Server Components enable real-time user interactions without any server requests.

B Server Components allow direct manipulation of the DOM on the client side.

C Server Components reduce the amount of JavaScript sent to the browser, improving performance.

D Server Components force all code to run only on the client, improving responsiveness.

💡 Hint

Think about how sending less code to the browser affects loading speed.

Server Components run on the server and send only the rendered HTML to the client. This reduces JavaScript bundle size and improves page load speed.

❓ component_behavior

intermediate

What happens when a Server Component fetches data?

In Next.js, if a Server Component fetches data during rendering, what is the behavior seen on the client?

A The data is fetched on the server, and the client receives fully rendered HTML with data included.

B The data fetch happens on the client after the component loads, causing a loading state.

C The component throws an error because Server Components cannot fetch data.

D The data is fetched twice: once on the server and once on the client.

💡 Hint

Remember where Server Components run and when data fetching happens.

Server Components run on the server, so data fetching happens there. The client receives the final HTML with data already included, avoiding extra client fetches.

❓ lifecycle

advanced

How do Server Components affect client-side lifecycle events?

Which statement correctly describes the effect of Server Components on client-side lifecycle events like useEffect?

A Server Components run both on server and client, so useEffect runs twice.

B Server Components do not run on the client, so client-side lifecycle hooks like useEffect are not available in them.

C Server Components run only on the client, so useEffect is the main way to fetch data.

D Server Components automatically convert useEffect hooks into server-side code.

💡 Hint

Think about where Server Components execute and what that means for client-only hooks.

Server Components run only on the server, so hooks that depend on the client environment, like useEffect, do not run in them.

📝 Syntax

advanced

Identify the correct way to mark a component as a Server Component in Next.js

Which code snippet correctly marks a React component as a Server Component in Next.js?

NextJS

export default function MyComponent() {
  return <div>Hello from Server Component</div>;
}

A No special directive needed; components are Server Components by default

B "use client" at the top of the file

C Add a special ServerComponent() wrapper around the function

D "use server" at the top of the file

💡 Hint

Think about the default behavior of components in Next.js App Router.

In Next.js App Router, components are Server Components by default. To make a component a Client Component, you add "use client" at the top.

🔧 Debug

expert

Why does this Server Component cause a runtime error?

Consider this Next.js Server Component code: export default function UserProfile() { const [count, setCount] = useState(0); return ; } What is the cause of the runtime error?

A The onClick handler is missing parentheses, causing a syntax error.

B Server Components require all event handlers to be async functions.

C The component is missing a return statement.

D useState cannot be used in Server Components because they do not run on the client.

💡 Hint

Think about which React hooks are allowed in Server Components.

useState is a client-side hook and cannot be used in Server Components, which run only on the server. This causes a runtime error.