diff --git a/docs/content/ssr.mdx b/docs/content/ssr.mdx deleted file mode 100644 index f799aa033fc..00000000000 --- a/docs/content/ssr.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Server-side rendering with Primer React ---- - -## SSR-safe ID generation - -Some Primer components generate their own DOM IDs. Those IDs must be isomorphic (so that server-side rendering and client-side rendering yield the same ID, avoiding hydration issues) and unique across the DOM. We use [@react-aria/ssr](https://react-spectrum.adobe.com/react-aria/ssr.html) to generate those IDs. In client-only rendering, this doesn't require any additional work. In SSR contexts, you must wrap your application with at least one `SSRProvider`: - -``` -import {SSRProvider} from '@primer/react'; - -function App() { - return ( - - - - ) -} -``` - -`SSRProvider` maintains the context necessary to ensure IDs are consistent. In cases where some parts of the react tree are rendered asynchronously, you should wrap an additional `SSRProvider` around the conditionally rendered elements: - -``` -function MyApplication() { - const [dataA] = useAsyncData('a'); - const [dataB] = useAsyncData('b'); - - return ( - <> - - {dataA && } - - - {dataB && } - - - ) -} -``` - -This will ensure that the IDs are consistent for any sequencing of `dataA` and `dataB` being resolved. - -See also [React Aria's server side rendering documentation](https://react-spectrum.adobe.com/react-aria/ssr.html). diff --git a/package-lock.json b/package-lock.json index 6b74c834ec2..7462878c396 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60347,7 +60347,6 @@ "@primer/live-region-element": "^0.2.0", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "7.15.3", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", diff --git a/packages/react/package.json b/packages/react/package.json index 89d3d85f40a..b8e26a9b785 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -93,7 +93,6 @@ "@primer/live-region-element": "^0.2.0", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "7.15.3", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2",