Route handlers & data

Most data you can read directly inside a Server Component. But when you need a real endpoint — something the browser, a webhook, or another service calls — you use a route handler: a function in app/.../route.ts that receives a Request and returns a Response.

// app/api/tutor/route.ts
export async function POST(request: Request) {
  const { question } = await request.json();
  return Response.json({ answer: `Think of "${question}" as a boundary.` });
}

That's the clean place to stub an integration (an AI tutor, an avatar render, a webhook) before the real provider is wired — the contract is fixed, the implementation swaps later.

Static, cached, or dynamic

Every read is one of three things, and choosing well is most of performance:

• Static — same for everyone, rarely changes (a course title). Render once.
• Cached — shared but refreshable (a published catalog). Cache with a revalidate window.
• Dynamic — per-user or live (a learner's progress, a tutor reply). Compute every request.

The challenge classifies reads and routes each to the right strategy. Run it.

You can now read an App Router codebase, place chrome correctly, and reason about server boundaries and freshness — the foundation everything else builds on.