RSC Boundary

Overview

The Problem

React Server Components move part of the UI model back to the server, but the boundary is easy to lose while reading JSX. A file tree can tell you where "use client" appears. It cannot show how those choices compose on the rendered page, which client roots hydrate, or where static server output surrounds an interactive island.

That gap matters during reviews and onboarding. Accidental client boundaries are expensive because they pull more code into the browser. Server-only regions are also hard to reason about once client children, layouts, and framework wrappers sit between the source file and the DOM.

The bet

If the rendered page could show the RSC boundary directly, developers could review component placement without inferring everything from files and directives.

What I Built

• A shared @rsc-boundary/core package that walks the client React tree through DOM fiber pointers, filters framework noise, and keeps highlights in sync with a MutationObserver.
• @rsc-boundary/next for Next.js App Router projects and @rsc-boundary/start for TanStack Start projects.
• A root RscBoundaryProvider that renders the devtools pill in development and passes children through in production.
• Orange client-component outlines, blue server-region outlines, labels, and a panel for correlating the page with component names and provenance.
• Optional RscServerBoundaryMarker markers for explicit server labels when heuristic detection is not precise enough.

The Tradeoff

Client Components are discoverable from the hydrated React tree. Server Components are not, because they do not create client fibers. RSC Boundary handles that by detecting server regions by exclusion and by supporting explicit markers for cases where the heuristic needs a stable label.

That is the important constraint: the tool is a development aid, not a compiler. It is meant to make a page's server/client split visible enough to catch mistakes and teach the model, while staying out of production bundles and markup.

Where It's Going

RSC Boundary is published as scoped packages and maintained as a small open-source tool. The next useful work is less about adding surface area and more about improving framework coverage, surfacing cache boundaries such as Next.js "use cache" directives, reducing false positives in framework-generated trees, and keeping the docs honest about what the heuristic can and cannot know.

status

The project is open source under MIT. The repository includes the demo site, package source, playgrounds, and install skills for coding agents.

• Next.js
• TanStack Start
• React
• RSC