Hidden prop SSR exposure with Box component

Direct answer

The hidden prop leaves markup in the initial HTML whenever the server renders the component — which is always, because the server has no access to the client viewport or breakpoint context that hidden depends on. NoSSR (or <NoSsr>) prevents that exposure by omitting the children entirely from the server render, emitting only a placeholder comment node. When combined, NoSSR wins on the server (no markup), then the client hydrates the placeholder and evaluates hidden afterward. The trade-off is a hydration boundary: the subtree mounts later, which can cause layout shift and delays interactive readiness.

Confirmed behavior

• hidden alone: Renders on server with inline display: none (or breakpoint-specific styles). Markup and any child data remain in the HTML payload.
• NoSSR alone: Server outputs an empty comment (<!-- -->) or custom fallback. Children mount only after client hydration.
• hidden + NoSSR together: Server renders nothing for the subtree. Client hydrates the placeholder, then runs hidden logic (media query / breakpoint check) to decide visibility.
• MUI v5 vs v6: In v5, hidden uses withWidth() HOC or useMediaQuery. In v6, hidden is deprecated in favor of sx={{ display: { xs: 'none', md: 'block' } }}. Both produce identical SSR semantics — markup present with styles.
• Box component: No special SSR handling. It renders a <div> (or component prop) and inherits system props.

Hydration trade-offs

• Layout shift (CLS): The placeholder comment node has zero dimensions. When the hidden content later mounts (if hidden={false} on client), it can push layout. Provide a fallback prop with matching dimensions (e.g., a skeleton) to avoid CLS.
• Interactive delay: Buttons, forms, or links inside a NoSSR subtree are unavailable until hydration completes. For above-the-fold content, this degrades perceived performance.
• React 18 selective hydration: Siblings may hydrate while the NoSSR subtree waits, causing a brief flash of missing content.
• Dev double-render: StrictMode in development mounts/unmounts the client-only subtree twice — expect double useEffect runs.

Security note

hidden is visual only. Props, children, and any serialized data in the component tree remain in the server HTML. NoSSR removes markup from the SSR payload but does not replace server-side authorization. Sensitive data must be gated at the data-fetching layer (e.g., getServerSideProps, loaders, API checks).

Steps for this case

1. Confirm MUI version: npm list @mui/material. If v6+, migrate hidden to sx breakpoint syntax.
2. Wrap sensitive subtrees in <NoSsr> (or NoSSR prop on Box) rather than relying on hidden.
3. Add a fallback prop to <NoSsr> with a skeleton or fixed-height placeholder matching the expected client dimensions.
4. Verify by viewing page source (curl -s localhost:3000) — the sensitive markup should be absent.

One missing detail

What MUI version is in package.json? The migration path for hidden differs between v5 and v6, and the recommended replacement (sx breakpoints) only applies to v6+.