updating docs to include renderToStyleElements()

sopranopillow · sopranopillow · commit a2df9e109fcf · 2022-11-08T19:36:15.000-07:00
diff --git a/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx
@@ -7,30 +7,63 @@ import { SSRDefaultOpen } from './MenuSSRDefaultOpen.stories';
 
 Fluent UI React v9 fully supports Server-Side Rendering.
 
-## Basic setup
+### Basic setup
 
 For any setup using SSR, you need to provide a `RendererProvider`, `SSRProvider` and `ThemeProvider` in the root file of your app. If these providers are not added, there will be issues when hydrating. See the following example:
 
 ```tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
 import {
   createDOMRenderer,
   FluentProvider,
-  SSRProvider,
+  makeStyles,
   RendererProvider,
+  renderToStyleElements,
+  SSRProvider,
   webLightTheme,
 } from '@fluentui/react-components';
 
-function App() {
-  return (
-    <RendererProvider renderer={createDOMRenderer()}>
+const useExampleStyles = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
+
+const ExampleComponent: React.FC = () => {
+  const classes = useExampleStyles();
+
+  return <div className={classes.root}>Hello world</div>;
+};
+
+const server = express();
+
+server.get('/', (req, res) => {
+  const renderer = createDOMRenderer();
+
+  const html = ReactDOM.renderToString(
+    <RendererProvider renderer={renderer}>
       <SSRProvider>
         <FluentProvider theme={webLightTheme}>
-          <div className="App">{/* ... */}</div>
+          <ExampleComponent />
         </FluentProvider>
       </SSRProvider>
-    </RendererProvider>
+    </RendererProvider>,
   );
-}
+
+  res.send(`
+    <html>
+      <head>
+        ${renderToStyleElements(renderer)}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `);
+});
+
+server.listen(3000, 'localhost');
 ```
 
 ### Next.js
