SSRProvider

When using SSR with React Aria in React 16 or 17, applications must be wrapped in an SSRProvider. This ensures that auto generated ids are consistent between the client and server.

Introduction#

If you're using React 16 or 17, SSRProvider should be used as a wrapper for the entire application during server side rendering. It works together with the useId hook to ensure that auto generated ids are consistent between the client and server by resetting the id internal counter on each request. See the server side rendering docs for more information.

Note: if you're using React 18 or newer, SSRProvider is not necessary and can be removed from your app. React Aria uses the React.useId hook internally when using React 18, which ensures ids are consistent.

Props#

Example#

import {SSRProvider} from 'react-aria';

<SSRProvider>
  <YourApp />
</SSRProvider>

import {SSRProvider} from 'react-aria';

<SSRProvider>
  <YourApp />
</SSRProvider>

import {SSRProvider} from 'react-aria';

<SSRProvider>
  <YourApp />
</SSRProvider>