Clarify docs

Author: jfuchs

docs/content/ssr.mdx

@@ -4,10 +4,34 @@ title: Server-side rendering with Primer React
 
 ## SSR-safe ID generation
 
-Some primer components generate IDs for elements that unique and are isomorphic (server-side rendering and client-side rendering are the same). 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 work. In SSR contexts, you must wrap your application with `<SSRProvider>`:
+Some primer components generate their own DOM IDs. Those IDs must be unique across the DOM and isomorphic (so that server-side rendering and client-side rendering yield the same ID, avoiding hydration issues). 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>`:
 
 ```
-<SSRProvider></SSRProvider>
+import {SSRProvider} from '@primer/components';
+
+<SSRProvider>
+  <MyApplication />
+</SSRProvider>
+```
+
+`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 <>
+    <SSRProvider>
+      {dataA && <MyComponentA data={dataA} />}
+    </SSRProvider>
+    <SSRProvider>
+      {dataB && <MyComponentB data={dataB} />}
+    </SSRProvider>
+  </>
+}
+```
+
+This will ensure that the IDs are consistent for any sequencing of `dataA` and `dataB` being resolved.
 
-SSRProvider maintains the context necessary to ensure IDs are consistent.
+See also [React Aria's server side rendering documentation](https://react-spectrum.adobe.com/react-aria/ssr.html).