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.

Practice

1. What is the main reason Next.js renders pages on the server first?

easy

A. To avoid using React components

B. To run JavaScript only on the client

C. To improve page load speed and SEO

D. To prevent any HTML from being sent to the browser

Solution

1. Step 1: Understand server-first rendering purpose

   Next.js renders pages on the server to send fully formed HTML to the browser quickly.

2. Step 2: Connect server rendering to SEO and speed

   Sending ready HTML helps search engines read content and users see pages faster.

3. Final Answer:

   To improve page load speed and SEO -> Option C

4. Quick Check:

   Server-first rendering = better speed and SEO [OK]

Hint: Server rendering means faster pages and better SEO [OK]

Common Mistakes:

• Thinking server rendering delays page load
• Believing React is not used in Next.js
• Assuming HTML is not sent to the browser

2. Which Next.js function is used to fetch data on the server before rendering a page?

easy

A. getServerSideProps

B. componentDidMount

C. useEffect

D. getStaticProps

Solution

1. Step 1: Identify server-side data fetching functions

   Next.js provides getServerSideProps to fetch data on the server at request time.

2. Step 2: Differentiate from other functions

   getStaticProps runs at build time, useEffect and componentDidMount run on client side.

3. Final Answer:

   getServerSideProps -> Option A

4. Quick Check:

   Server data fetch = getServerSideProps [OK]

Hint: Server data fetch uses getServerSideProps [OK]

Common Mistakes:

• Confusing getStaticProps with server-side fetching
• Using client hooks like useEffect for server data
• Thinking componentDidMount runs on server

3. Given this Next.js page code, what will the browser initially receive?

export async function getServerSideProps() {
  return { props: { message: 'Hello from server' } };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

medium

A. HTML with <h1>Hello from server</h1>

B. An empty page with no content

C. JavaScript code only, no HTML

D. A JSON object with the message

Solution

1. Step 1: Understand getServerSideProps role

   This function runs on the server and passes props to the component before rendering.

2. Step 2: Determine what is sent to browser

   The browser receives fully rendered HTML with the message inside an <h1> tag.

3. Final Answer:

   HTML with <h1>Hello from server</h1> -> Option A

4. Quick Check:

   Server props produce HTML output [OK]

Hint: Server props render HTML sent to browser first [OK]

Common Mistakes:

• Expecting raw JavaScript or JSON instead of HTML
• Thinking page is empty initially
• Confusing client-side rendering with server rendering

4. What is wrong with this Next.js page code?

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

medium

A. React components cannot use props

B. getServerSideProps cannot be async

C. Props cannot be passed to components

D. fetch returns a Response object, not JSON data

Solution

1. Step 1: Check fetch usage in getServerSideProps

   fetch returns a Response object; to get JSON, .json() must be called.

2. Step 2: Identify missing JSON parsing

   Without calling await data.json(), data is not the actual JSON, causing errors in rendering.

3. Final Answer:

   fetch returns a Response object, not JSON data -> Option D

4. Quick Check:

   fetch needs .json() to get data [OK]

Hint: Always parse fetch response with .json() in server props [OK]

Common Mistakes:

• Assuming fetch returns JSON directly
• Thinking getServerSideProps can't be async
• Believing props can't be passed to components

5. You want to render a page that shows a list of users fetched from an API on every request. Which Next.js approach correctly ensures the page is server-rendered with fresh data each time?

hard

A. Use getStaticProps to fetch users at build time

B. Use getServerSideProps to fetch users on each request

C. Fetch users inside useEffect in the component

D. Hardcode the user list in the component

Solution

1. Step 1: Understand data freshness needs

   Fetching fresh data on every request requires server-side fetching at request time.

2. Step 2: Match Next.js data fetching methods

   getServerSideProps runs on each request, while getStaticProps runs once at build time.

3. Step 3: Evaluate client-side fetching

   Fetching inside useEffect delays data until after page load, hurting SEO and initial render.

4. Final Answer:

   Use getServerSideProps to fetch users on each request -> Option B

5. Quick Check:

   Fresh server data = getServerSideProps [OK]

Hint: Fresh data each request? Use getServerSideProps [OK]

Common Mistakes:

• Using getStaticProps for dynamic data
• Fetching data only on client side
• Hardcoding data instead of fetching