Testing server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js server component?

Consider this server component in Next.js 14+ that fetches data and renders it. What will be the output when 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 Error: Cannot use await in server component

B <h1>undefined</h1>

C <h1>Hello from client!</h1>

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

💡 Hint

Server components can use async/await to fetch data before rendering.

The server component uses async/await to fetch data and renders the message inside an h1 tag. This is valid in Next.js 14+ server components.

❓ lifecycle

intermediate

When does a Next.js server component run its code?

In Next.js 14+, when does the code inside a server component execute?

A Only on the server during the initial page load and on server-side navigation

B Only on the client after hydration

C On both client and server simultaneously

D Only when a user clicks a button inside the component

💡 Hint

Server components run where the server renders the page.

Server components run only on the server during initial rendering and server-side navigations. They do not run on the client.

🔧 Debug

advanced

Why does this server component cause a hydration mismatch?

Examine this server component code. Why does it cause a hydration mismatch error in Next.js?

NextJS

import React from 'react';

export default function Time() {
  const now = new Date().toISOString();
  return <p>{now}</p>;
}

A Because the component uses Date inside a server component, causing different output on server and client

B Because server components cannot return JSX elements

C Because the component uses React hooks incorrectly

D Because the component is missing async keyword

💡 Hint

Server components render once on the server, but client hydration expects stable output.

Using Date.now() or new Date() directly in server components causes the rendered HTML to differ from client hydration, leading to mismatch errors.

📝 Syntax

advanced

Which option correctly defines a server component with a server action in Next.js 14+?

Select the correct syntax for a server component that includes a server action to handle a form submission.

A

export default function Form() {
  function submit(data) {
    console.log(data);
  }
  return <form onSubmit={submit}><button type="submit">Send</button></form>;
}

B

export default async function Form() {
  async function submit(data) {
    'use server';
    console.log(data);
  }
  return <form action={submit}><button type="submit">Send</button></form>;
}

C

export default async function Form() {
  function submit(data) {
    'use server';
    console.log(data);
  }
  return <form action={submit}><button type="submit">Send</button></form>;
}

D

export default function Form() {
  async function submit(data) {
    console.log(data);
  }
  return <form action={submit}><button type="submit">Send</button></form>;
}

💡 Hint

Server actions require the 'use server' directive inside the function and must be async.

Option B correctly marks the submit function as async and includes the 'use server' directive, enabling server action usage in Next.js 14+.

❓ state_output

expert

What is the value of count after rendering this mixed server/client component setup?

Given this Next.js 14+ setup with a server component rendering a client component, what is the final count value displayed after clicking the button twice?

NextJS

import React, { useState } from 'react';

// Client component
'use client';
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

// Server component
export default function Page() {
  return <Counter />;
}

A Count: 1

B Count: 0

C Count: 2

D Count: undefined

💡 Hint

Client components manage state and update on user interaction.

The Counter is a client component with useState. Clicking twice increments count from 0 to 2, so the displayed value is 'Count: 2'.