Server component execution model in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server component in Next.js.

NextJS

export default function Home() {
  return <main>[1]</main>;
}

Drag options to blanks, or click blank then click option'

AuseEffect(() => {})

BuseState('Hello')

C<ClientComponent />

D"Hello from server component!"

Attempts:

3 left

💡 Hint

Common Mistakes

Using client hooks like useState or useEffect inside server components.

Trying to render client components directly without wrapping.

The server component returns JSX directly as a function without hooks like useState or useEffect.

2fill in blank

medium

Complete the code to fetch data in a server component using async/await.

NextJS

export default async function Data() {
  const res = await fetch('/api/data');
  const data = await res.[1]();
  return <pre>{JSON.stringify(data)}</pre>;
}

Drag options to blanks, or click blank then click option'

Atext

Bblob

Cjson

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns raw string instead of parsed JSON.

Using client-only hooks to fetch data.

To parse JSON response, use res.json() in async server components.

3fill in blank

hard

Fix the error in the server component by completing the code to mark it as a client component.

NextJS

"use client";

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = [1](0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

CuseMemo

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use useState in server components without marking them as client.

Using hooks that don't manage state for this purpose.

Client components can use useState to manage state, but server components cannot.

4fill in blank

hard

Fill both blanks to correctly fetch data and render it in a server component.

NextJS

export default async function User() {
  const response = await fetch('/api/user');
  const user = await response.[1]();
  return <h1>[2]</h1>;
}

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cuser.name

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns a string, not an object.

Trying to render the whole user object directly instead of a property.

Use json() to parse the response, then access user.name to display the user's name.

5fill in blank

hard

Fill all three blanks to create a server component that fetches posts and renders their titles.

NextJS

export default async function Posts() {
  const res = await fetch('/api/posts');
  const posts = await res.[1]();
  return (
    <ul>
      {posts.[2](post => (
        <li key={post.id}>[3]</li>
      ))}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Ajson

Bmap

Cpost.title

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter instead of map for rendering.

Trying to render the whole post object instead of its title.

Parse JSON data, then use map to loop over posts and render each post's title.