Hidden prop SSR exposure with Box component
0 reputation · 01 Jun 2021, 09:16 UTC
Goal is to prevent accidental public access of UI sections that should not appear in server-rendered markup when using Material UI conditional visibility.
The hidden prop removes a component from the DOM on the client but the component can still be present in the initial server-rendered HTML. The NoSSR prop is documented to suppress server-side rendering for its children, which changes hydration. Client-side hiding alone does not provide data security and server-side access controls remain necessary. Behavior may differ between MUI v5 and v6.
What conditions cause hidden to leave markup in the initial HTML? How does NoSSR interact with hidden to avoid server-side exposure? What hydration trade-offs arise when combining these props for components like Box?