updating docs to include renderToStyleElements()

microsoft · Nov 9, 2022 · a2df9e1 · a2df9e1
1 parent 1073acb
commit a2df9e1
Showing 1 changed file with 41 additions and 8 deletions.
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