No Ssr
The NoSsr
component is small wrapper that can be used to render
children client side only. The main use-case are for components
that rely on browser API to work correctly.
See the SsrProvider for more info.
Simple Example
import { CoreProviders } from "@react-md/core/CoreProviders";
import { NoSsr } from "@react-md/core/NoSsr";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
function Example(): ReactElement {
return (
<>
<Typography>This is always rendered.</Typography>
<NoSsr>
<Typography>
This is only rendered client-side after rehydrating.
</Typography>
</NoSsr>
</>
);
}
function App(): ReactElement {
return (
<CoreProviders ssr>
<Example />
</CoreProviders>
);
}