Why rendering strategy matters in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a server component that fetches data.

NextJS

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

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

Ajson

Btext

Cblob

DarrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes data to be a string, not an object.

The json() method parses the response as JSON, which is needed to get the data object.

2fill in blank

medium

Complete the code to make a client component with state.

NextJS

"use client";
import { useState } from 'react';

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

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

A0

Bnull

Cundefined

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Starting state as null or undefined causes errors when incrementing.

State for a counter starts at 0 to represent the initial count.

3fill in blank

hard

Fix the error in the server component that tries to use useState.

NextJS

"use client";
import { useState } from 'react';

export default function ServerComp() {
  const [value, setValue] = [1](0);
  return <div>{value}</div>;
}

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

AuseEffect

BuseMemo

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use useState in server components causes errors.

useState is a React hook only for client components. Server components cannot use it.

4fill in blank

hard

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

NextJS

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

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

Ano-store

Bjson

Cforce-cache

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using cache options incorrectly causes stale data or errors.

Using no-store disables caching to always fetch fresh data. json() parses the response.

5fill in blank

hard

Fill all three blanks to create a client component that updates state on button click.

NextJS

"use client";
import { useState } from 'react';

export default function Clicker() {
  const [count, setCount] = useState([1]);
  return (
    <button onClick={() => setCount(count [2] 1)} aria-label="Increment count">
      Count: {count}
    </button>
  );
}

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

A0

B+

C-

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Starting count at 1 or using - instead of + causes wrong behavior.

Start count at 0, increment by adding 1 using the + operator.