Topic

Challenge: Server or Client?

Definition

A Server Component may render server-side data and compose Client Components, while browser interactivity must be isolated behind a Client Component boundary.

In simpler words

Keep the page shell on the server; make only the clicky leaf client-side.

The challenge prevents accidentally marking a whole route client-only because one child needs a button.

Open live example →

After this you can

Locate a Client Component boundary
Keep server-only code out of browser bundles

Find the smallest boundary

Definition

The "use client" directive marks a module and its imports as client-side, so it should appear only where browser APIs or interaction begin.

In simpler words

Move the interactive leaf, not the entire page, to the client.

Server Components can pass serializable props to Client Components.

A Client Component cannot import a server-only database or secret module.

Keep in mind

If the only event is a composer submit, the route shell does not need "use client".

Challenge lab

Bug report

A feed page imports a server-only environment helper after adding "use client" for a like button.

What is broken

The route was turned into a Client Component to make one button interactive.

Broken snippet

'use client';
import { serverOnlyConfig } from "@/lib/server-config";

export default function FeedPage() {
  return <button onClick={...}>Like</button>;
}

Pass criteria

Feed shell remains server-rendered
Button receives only serializable data and callbacks
No server-only import reaches the browser

Checking your session…

Choose the correct fix

Keep the page server-side and extract the interactive button into a small Client Component.Keep "use client" on the page and replace the helper with a public environment variable.Read the secret from window so the client page can use it.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Next challenge focus?

Concept

Redux store setup and slice normalizationRouting, server/client split, and data fetching patternsCSS-in-JS theming and animation pipelinesWebSocket gateways for real-time updates

2. Linking between challenge pages?

Syntax

An <a> tag with a full page reload for internal routesrouter.replace for every navigationA Server Action to change the routeUse next/link and app/ segments correctly

3. Interactive widget in a server page?

Practical

Add "use client" to the whole route segmentPass an onClick prop down from the Server ComponentMake the server page async so handlers workExtract a Client Component island

4. Loading states?

Logic

loading.tsx / Suspense where appropriateA useState isLoading flag in every Server ComponentBlock rendering until all data resolves server-sideA global spinner in the root layout for all routes

5. Metadata for challenge pages?

Concept

export metadata / generateMetadataSet document.title in a useEffect on mountAdd a <title> inside the page’s JSX returnConfigure titles in next.config.js

6. Fetching for a challenge board?

Practical

Always fetch in a client useEffect after mountServer fetch or Query depending on interactivity needsAlways fetch inside getServerSidePropsAlways fetch through a Redux thunk

7. Env usage?

Syntax

Public env for public config; secrets stay server-sidePrefix every variable with NEXT_PUBLIC_ for consistencyRead secrets in Client Components at runtimeExpose secrets through a public Route Handler

8. notFound in dynamic routes?

Logic

Return a redirect() to the home page insteadThrow a generic Error to trigger error.tsxRender an empty fragment so nothing showsCall notFound() when the resource is missing

9. Challenge deploy smoke?

Concept

Only run the dev server and click aroundBuild locally and hit critical routesRely on TypeScript passing as the deploy checkDeploy first and test directly in production

10. Which Next challenge mistake is common?

Practical

Marking everything 'use client' without needFetching data directly in a Server ComponentUsing generateMetadata for page titlesColocating loading.tsx with a route segment

11. What does the interactive Filter need?

Conceptintermediate

export default function Page() {
  return <Filter onChange={setQ} />; // Filter uses useState
}

A "use server" directive on the Filter componentA "use client" directive to use state and handlersAn async component so setQ can runA Suspense boundary wrapping the Filter

12. What common Next challenge mistake does this show?

Syntaxadvanced

'use client';
export default function Page() {
  return <article>{staticContent}</article>;
}

Fetching the article content in a Server ComponentMissing a generateMetadata export on the pageMarking static content "use client" when it could be a Server ComponentRendering the article without a layout wrapper

13. Where does params.id come from?

Practicalintermediate

// app/tickets/[id]/page.tsx
export default function Page({ params }) {
  return <h1>Ticket {params.id}</h1>;
}

A searchParams query-string valueThe dynamic [id] route segmentA prop passed from the parent layoutThe generateStaticParams return value

14. What is the idiomatic Next handling here?

Logicadvanced

const ticket = await getTicket(id);
if (!ticket) { /* ??? */ }

redirect() to the tickets list pagethrow new Error to trigger error.tsxCall notFound() to render the not-found boundaryreturn a <NotFound /> component manually

15. What is the better internal-navigation choice?

Conceptintermediate

<a href="/tickets">Tickets</a>

router.push in an onClick on the anchorA prefetched <a> with a data-nav attributeredirect("/tickets") from the component bodyUse next/link <Link href="/tickets"> for client transitions

Checking your session…