← Next.js — App Router, Server/Client Boundaries, and Production Rendering
Deep Instruction · Phase 03

Server Components as the Default

Fetch and compose on the server when browser interactivity is not required.

Learning contract

What you must be able to do

Objectives

Mental model

Understand the idea before syntax

Build the actual TaskFlow web shell and reason precisely about what runs on the server, what ships to the browser, and how routing affects data flow.

D4.3 — Evidence loop
predict
implement
run
observe
locate first mismatch
repair
re-run
When the result differs from your prediction, debugging starts at the first boundary where evidence diverges—not at the last visible symptom.
Before you code

Establish a healthy baseline

  1. 01

    Open a scratch file or the relevant TaskFlow package.

  2. 02

    Run the existing project/tests once so you know the baseline is healthy.

  3. 03

    State what evidence will prove success before changing code.

Instructor code-along

Small change, immediate evidence

  1. 01

    Write the goal in observable terms before coding: by the end of this lesson you should be able to demonstrate “Server Components as the Default” in a running TaskFlow-oriented example.

  2. 02

    Read the example once without running it. Predict the exact output, state change, request, or compiler behavior and write that prediction down.

  3. 03

    Type the example yourself rather than pasting it. Run the narrowest command that exercises only this concept, then compare observed evidence with your prediction.

  4. 04

    Change one assumption at a time. Keep the change small enough that you can explain why the result changed.

  5. 05

    Perform the intentional failure lab: Import window inside the Server Component and interpret the resulting failure.

  6. 06

    Read the resulting compiler error, stack trace, HTTP response, browser evidence, database state, or CI log from the first line that is actually relevant to your code.

  7. 07

    Repair only the root cause. Re-run the same verification so you can prove the repair changed the observed evidence.

  8. 08

    Close the reference and rebuild the important part from memory. If you cannot explain why each boundary exists, revisit the smallest missing concept rather than memorizing the final code.

textWorking example
export default async function TasksPage() {
  const tasks = await getTasks();
  return <TaskList tasks={tasks} />;
}
Expected evidence

Data can be fetched before HTML is sent; no browser effect is required for the initial list.

Break it on purpose

Import window inside the Server Component and interpret the resulting failure.

Do not fix it immediately. Capture the compiler error, request/response, stack trace, database state, browser output, or CI log first. Debugging skill grows from comparing evidence with a prior prediction.

Investigation checklist

  1. What did you predict?
  2. What actually happened?
  3. At what boundary do those first differ?
  4. What is the smallest piece of evidence that proves the failure lives there?
  5. Can you fix the cause without changing unrelated layers?
  6. Can you add a regression test or repeatable verification?
Transfer challenge

Now work without the transcript

Apply Server Components as the Default to one new TaskFlow requirement. Do not reopen the example until you have a failing attempt, an explanation of the failure, and a specific question you cannot answer.

Exit ticket

Continue only when these are true

Mastery evidence

Lesson progress

Record this deep-dive lesson

Mark complete only after the transfer challenge and exit ticket.