0
0
NextJSframework~10 mins

Why server components are the default in NextJS - Test Your Understanding

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to create 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'
Adocument.getElementById('root')
BuseState()
CuseEffect()
D"Hello from server component!"
Attempts:
3 left
💡 Hint
Common Mistakes
Trying to use useState or useEffect in server components.
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.json();
  return <div>[1]</div>;
}
Drag options to blanks, or click blank then click option'
Adata.message
BuseState(data)
Cconsole.log(data)
Ddocument.querySelector('div')
Attempts:
3 left
💡 Hint
Common Mistakes
Using client hooks or DOM methods in server components.
3fill in blank
hard

Fix the error in this server component by completing the code.

NextJS
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = [1];
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Drag options to blanks, or click blank then click option'
AuseMemo(0)
BuseState(0)
Cfetch(0)
DuseEffect(0)
Attempts:
3 left
💡 Hint
Common Mistakes
Trying to use useState in server components.
4fill in blank
hard

Fill both blanks to mark a component as client and use state.

NextJS
"use client";
import { [1] } from 'react';

export default function Clicker() {
  const [count, setCount] = [2](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
Forgetting "use client" directive.
Using hooks not related to state.
5fill in blank
hard

Fill all three blanks to fetch data in a server component and render it safely.

NextJS
export default async function Profile() {
  const res = await fetch('/api/user');
  const user = await res.[1]();
  if (!user) return <p>No user found</p>;
  return <section>
    <h1>[2]</h1>
    <p>Email: [3]</p>
  </section>;
}
Drag options to blanks, or click blank then click option'
Ajson
Buser.name
Cuser.email
Dtext
Attempts:
3 left
💡 Hint
Common Mistakes
Using res.text() instead of res.json().
Trying to access properties before parsing.