What can run in server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data in a Next.js server component.

NextJS

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

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

A'localStorage.getItem("token")'

B'/api/client-only'

C'window.location.href'

D'https://api.example.com/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use browser-only APIs like localStorage or window in server components.

Fetching from client-only API routes that require client context.

Server components can fetch data from external APIs using fetch with a URL string.

2fill in blank

medium

Complete the code to import a React hook that cannot run in server components.

NextJS

'use client';

import React, { [1] } from 'react';

export default function ClientComponent() {
  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

Using useState or useEffect in server components causes errors.

Confusing hooks that run on server and client.

useState is a React hook that manages state and only works in client components, not server components.

3fill in blank

hard

Complete the code to access route parameters in a Next.js server component.

NextJS

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

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

Aparams

BuseParams

CuseRouter

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-only hooks like useParams from next/navigation.

Confusing server props with client hooks like useRouter.

Server components receive params as a prop to access dynamic route parameters. No import is needed.

4fill in blank

hard

Fill both blanks to create a server component that renders a list from fetched data.

NextJS

export default async function List() {
  const res = await fetch('[1]');
  const data = await res.json();
  return (
    <ul>
      {data.map(item => <li key={item.[2]>{item.name}</li>)}
    </ul>
  );
}

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

A'https://api.example.com/items'

Bid

Cindex

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-only APIs or variables in server components.

Using non-unique or invalid keys in list rendering.

The server component fetches data from an API URL and uses the id property as the key for list items.

5fill in blank

hard

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

NextJS

export default async function Product() {
  const response = await fetch('[1]');
  const product = await response.[2]();
  return (
    <section>
      <h1>{product.[3]</h1>
      <p>{product.description}</p>
    </section>
  );
}

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

A'https://api.example.com/product/123'

Bjson

Ctitle

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() to parse response.

Trying to access properties that don't exist on the product object.

The server component fetches product data from the API URL, parses JSON, and renders the product's title and description.

Practice

1. Which of the following can you safely run inside a Next.js server component?

easy

A. Manipulating the DOM directly

B. Accessing a database directly

C. Adding event listeners for user clicks

D. Using browser APIs like localStorage

Solution

1. Step 1: Understand server component environment

   Server components run only on the server, so they can use server-only features like database access.

2. Step 2: Identify client-only features

   Browser APIs, event listeners, and DOM manipulation require client-side JavaScript and cannot run in server components.

3. Final Answer:

   Accessing a database directly -> Option B

4. Quick Check:

   Server-only code = Access database [OK]

Hint: Server components run server code only, no browser APIs [OK]

Common Mistakes:

• Thinking client APIs like localStorage work in server components
• Trying to add event listeners in server components
• Assuming DOM manipulation is possible on server

2. Which syntax correctly imports a server-only module inside a Next.js server component?

easy

A. import localStorage from 'localStorage';

B. import { useState } from 'react';

C. import window from 'window';

D. import fs from 'fs';

Solution

1. Step 1: Recognize server-only modules

   Modules like 'fs' (file system) are server-only and can be imported in server components.

2. Step 2: Identify invalid imports

   useState is client-side React hook, window and localStorage are browser globals, not importable modules.

3. Final Answer:

   import fs from 'fs'; -> Option D

4. Quick Check:

   Server module import = fs [OK]

Hint: Only import Node.js modules like fs in server components [OK]

Common Mistakes:

• Importing client hooks like useState in server components
• Trying to import browser globals as modules
• Confusing client and server imports

3. Given this server component code, what will be rendered?

import fs from 'fs';
export default function Page() {
  const data = fs.readFileSync('data.txt', 'utf8');
  return <div>{data}</div>;
}

medium

A. Contents of data.txt file inside a div

B. Error: fs module not found

C. Empty div with no content

D. Client-side error about fs usage

Solution

1. Step 1: Understand server component execution

   The code runs on the server, so fs.readFileSync reads the file content successfully.

2. Step 2: Render the file content

   The content read from 'data.txt' is returned inside a div and sent as HTML to the client.

3. Final Answer:

   Contents of data.txt file inside a div -> Option A

4. Quick Check:

   Server read file = content rendered [OK]

Hint: Server components can read files and render content directly [OK]

Common Mistakes:

• Thinking fs is unavailable in server components
• Expecting client-side errors for server code
• Assuming empty output without file content

4. What is wrong with this server component code?

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

medium

A. Both A and B

B. onClick handlers are not allowed in server components

C. useState cannot be used in server components

D. No error, code works fine

Solution

1. Step 1: Check React hooks usage in server components

   useState is a client-side hook and cannot be used in server components.

2. Step 2: Check event handlers in server components

   onClick handlers require client-side JavaScript and are not supported in server components.

3. Final Answer:

   Both A and B -> Option A

4. Quick Check:

   useState + onClick invalid in server components [OK]

Hint: No React hooks or event handlers in server components [OK]

Common Mistakes:

• Using useState in server components
• Adding client event handlers in server components
• Assuming server components can handle user events

5. You want to fetch data from a database and display it in a Next.js app. Which approach best uses server components to improve performance and security?

hard

A. Fetch data in the browser using fetch API directly

B. Fetch data inside a client component using useEffect

C. Fetch data inside a server component and pass it as props to a client component

D. Fetch data in a client component and store it in localStorage

Solution

1. Step 1: Understand server component advantages

   Server components can securely fetch data on the server, avoiding exposing secrets or extra client JS.

2. Step 2: Use server component to fetch and pass data

   Fetching data in server component and passing it as props to client components optimizes performance and security.

3. Final Answer:

   Fetch data inside a server component and pass it as props to a client component -> Option C

4. Quick Check:

   Server fetch + props passing = best practice [OK]

Hint: Fetch data server-side, then pass to client components [OK]

Common Mistakes:

• Fetching data only on client causing slower load
• Exposing secrets by fetching in client
• Storing sensitive data in localStorage