Skip to main content
react-md

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>
  );
}