How Next.js renders (server-first model) - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js Server Component?

Consider this Next.js Server Component that fetches data and renders it. What will the user see when this component is rendered?

NextJS

import React from 'react';

async function getData() {
  return { message: 'Hello from server!' };
}

export default async function Greeting() {
  const data = await getData();
  return <h1>{data.message}</h1>;
}

A <h1>undefined</h1>

B <h1>Loading...</h1>

C Error: Cannot use await in component

D <h1>Hello from server!</h1>

💡 Hint

Remember that Next.js Server Components can use async/await to fetch data before rendering.

Next.js Server Components run on the server and can await data fetching before rendering. So the component renders the fetched message directly.

❓ lifecycle

intermediate

When does Next.js Server Component code run?

In Next.js's server-first rendering model, when does the code inside a Server Component execute?

A Both on server and client simultaneously

B Only on the client after hydration

C Only on the server during the initial page request

D Only when the user interacts with the component

💡 Hint

Think about where server components run and when the HTML is generated.

Server Components run only on the server during the initial request to generate HTML. They do not run on the client.

📝 Syntax

advanced

Which option correctly defines a Next.js Client Component?

Next.js uses special syntax to mark Client Components. Which of these options correctly marks a component as a Client Component?

A

"use client";
export default function MyComponent() { return <div>Client</div>; }

B export const MyComponent = () => { return <div>Client</div>; };

C

"use server";
export default function MyComponent() { return <div>Client</div>; }

D export default function MyComponent() { return <div>Client</div>; }

💡 Hint

Client Components require a special directive at the top of the file.

Next.js requires the "use client" directive at the top of the file to mark a component as a Client Component.

🔧 Debug

advanced

Why does this Next.js Server Component cause a runtime error?

Examine this Server Component code. Why will it cause an error when rendered?

NextJS

import React from 'react';

export default function ServerComp() {
  const [count, setCount] = React.useState(0);
  return <div>{count}</div>;
}

A React is not imported

B useState cannot be used in Server Components

C Missing async keyword on the function

D No error, code runs fine

💡 Hint

Think about hooks and where they can be used in Next.js components.

React hooks like useState only work in Client Components. Server Components cannot use hooks that require client state.

🧠 Conceptual

expert

How does Next.js handle data fetching in Server Components for SEO and performance?

Which statement best describes how Next.js Server Components improve SEO and performance through data fetching?

A Data is fetched on the server before rendering, so HTML sent to the client includes all data, improving SEO and load speed

B Next.js does not support data fetching in Server Components

C Data is fetched both on server and client simultaneously to balance SEO and speed

D Data is fetched on the client after page load, improving interactivity but delaying SEO content

💡 Hint

Think about when the HTML is generated and what the client receives.

Next.js Server Components fetch data on the server before rendering, so the HTML sent to the client already contains the data. This improves SEO and reduces client load time.