useIsSSR

Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay browser-specific rendering until after hydration.

API#

Introduction#

useIsSSR returns true during server rendering and hydration, and updates to false immediately after hydration. This can be used to ensure that the server rendered HTML and initially hydrated DOM match, but trigger an additional render after hydration to run browser-specific code. For example, it could be used to run media queries or feature detection for browser-specific APIs that affect rendering but cannot be run server side.

This hook must be used in combination with the SSRProvider component wrapping your application. See the server side rendering docs for more information.

Example#

import {useIsSSR} from '@react-aria/ssr';

function MyComponent() {
  let isSSR = useIsSSR();
  return <span>{isSSR ? 'Server' : 'Client'}</span>;
}

import {useIsSSR} from '@react-aria/ssr';

function MyComponent() {
  let isSSR = useIsSSR();
  return <span>{isSSR ? 'Server' : 'Client'}</span>;
}

import {useIsSSR} from '@react-aria/ssr';

function MyComponent() {
  let isSSR = useIsSSR();
  return (
    <span>
      {isSSR
        ? 'Server'
        : 'Client'}
    </span>
  );
}