How it works

Pipeline

1. Start from a DOM root (e.g. #__next or body).
2. Read __reactFiber$* from nodes and walk the fiber tree (same family of internals React DevTools uses).
3. Collect user client components: function/class/forwardRef/memo (including simple memo) fibers, with display names, excluding a known set of Next.js App Router internals.
4. Map each client component to its outermost host DOM nodes (stopping at nested user boundaries).
5. Collect explicit server regions: elements with data-rsc-boundary-server (e.g. via RscServerBoundaryMarker).
6. Compute heuristic regions: walk descendants of the app root; nodes outside every client component DOM subtree become candidates, drop wrappers that strictly contain a client root, then take minimal region roots (nested islands, not only top-level siblings).
7. Draw blue outlines for server regions and orange for client boundaries; floating labels include provenance (explicit vs ~ heuristic).
8. Attach a debounced MutationObserver on document.body to re-scan after navigations and dynamic updates.

What you see

• Client: dashed orange border and a label with the component name when available.
• Server: dashed blue border. Explicit regions use your marker label; heuristic regions use host tags / ids because there is no client fiber name.

Explicit markers

Wrap any server subtree with RscServerBoundaryMarker or set data-rsc-boundary-server on your own element. Optional attribute value becomes the panel label. Heuristic scanning skips DOM inside those subtrees so regions are not double-counted.

Development vs production builds

RscBoundaryProvider mounts devtools only when NODE_ENV is development. Production bundles ship no scanning UI. This documentation site uses static outlined previews on the Examples page so you can see the color language without running fiber detection on a public build.

Limitations

• Depends on React internals (__reactFiber$*). Acceptable for devtools; not a public React API.
• Next.js internal filtering is name-based and may need updates as the framework evolves.
• Heuristic server regions are inferred from DOM vs client roots; server output rendered inside a client subtree (slots) is still classified as client-owned for highlighting. Use explicit markers where that distinction matters.
• Portals and non-standard roots can still produce surprising groupings.