diff --git a/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx
index 80298c59e914f6..dbf8cb26b6d565 100644
--- a/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx
+++ b/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx
@@ -7,6 +7,65 @@ import { SSRDefaultOpen } from './MenuSSRDefaultOpen.stories';
Fluent UI React v9 fully supports Server-Side Rendering.
+### 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,
+ makeStyles,
+ RendererProvider,
+ renderToStyleElements,
+ SSRProvider,
+ webLightTheme,
+} from '@fluentui/react-components';
+
+const useExampleStyles = makeStyles({
+ root: {
+ color: 'red',
+ },
+});
+
+const ExampleComponent: React.FC = () => {
+ const classes = useExampleStyles();
+
+ return Hello world
;
+};
+
+const server = express();
+
+server.get('/', (req, res) => {
+ const renderer = createDOMRenderer();
+
+ const html = ReactDOM.renderToString(
+
+
+
+
+
+
+ ,
+ );
+
+ res.send(`
+
+
+ ${renderToStyleElements(renderer)}
+
+
+ ${html}
+
+
+ `);
+});
+
+server.listen(3000, 'localhost');
+```
+
### Next.js
For basic instructions on getting Next.js set up, see [Getting Started](https://nextjs.org/docs/getting-started).