Exercise 1: Replacing the Loop with include — Possible Solution
====================================================================

THE REPLACEMENT
------------------------------
Per this chapter, PageShell.tsx's own getBreadcrumb loop (from Chapter
4) is replaced with:

const pageWithAncestors = await prisma.page.findUniqueOrThrow({
  where: { id: page.id },
  include: { parent: { include: { parent: true } } },
});
const breadcrumb = flattenAncestors(pageWithAncestors);

WHY THE RESULT IS THE SAME
------------------------------
flattenAncestors() walks the nested parent chain from the fetched
object (page -> page.parent -> page.parent.parent) using unshift(),
building the array in the identical root-to-leaf order Chapter 4's own
getBreadcrumb produced - the display order is unchanged, only how the
data got there is different.

CONFIRMATION
------------------------------
Rendering a real page stored two or three levels deep still shows the
correct breadcrumb trail, in the correct order, exactly matching what
Chapter 4's own version produced for the same page - confirming the fix
is behavior-preserving, not just faster.

WHY THIS WORKS AS AN ANSWER
------------------------------
It correctly swaps the query-per-level loop for the single include-based
fetch plus an in-memory flatten step, and confirms the rendered output
is unchanged for a real nested page rather than just trusting the code
compiles without checking what it actually displays.