Server component restrictions in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

export default function Home() {
  return <h1>Hello from [1] component!</h1>;
}

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

Aserver

Bclient

Cshared

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing server components with client components

Adding 'use client' directive by mistake

Server components in Next.js are default exports without the 'use client' directive.

2fill in blank

medium

Complete the code to import a client component inside a server component.

NextJS

import ClientButton from './ClientButton';

export default function ServerPage() {
  return <div><[1] /></div>;
}

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

AClientComponent

BServerButton

CButton

DClientButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong component name

Trying to render a server component as client

Server components can import and render client components by referencing their correct names.

3fill in blank

hard

Fix the error in the server component by completing the code to fetch data correctly.

NextJS

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

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

Aforce-cache

Bdefault

Cno-store

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' causing stale data

Omitting cache option leading to unexpected caching

Server components should use 'no-store' to avoid caching when fetching dynamic data.

4fill in blank

hard

Fill both blanks to correctly mark a component as client and use state in Next.js.

NextJS

"use [1]";

import { [2] } from 'react';

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

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

Aclient

Bserver

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting 'use client' directive

Importing wrong React hooks

Client components must start with 'use client' and import 'useState' to manage state.

5fill in blank

hard

Fill all three blanks to create a server component that fetches data and renders a list.

NextJS

export default async function UsersList() {
  const res = await fetch('[1]', { cache: '[2]' });
  const users = await res.json();
  return (
    <ul>
      {users.map(user => <li key={user.id}>[3]</li>)}
    </ul>
  );
}

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

A/api/users

Bno-store

Cuser.name

D/api/data

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong API endpoint

Caching data causing stale results

Rendering wrong user property

The server component fetches from '/api/users' with 'no-store' cache and renders each user's name.