From 1073acbbed3ab921e3e92d0163017f9dda664d66 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 7 Nov 2022 15:48:05 -0700 Subject: [PATCH 1/2] adding basic setup section --- .../src/Concepts/SSR/SSR.stories.mdx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) 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..3e241b44ea0021 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,32 @@ 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 { + createDOMRenderer, + FluentProvider, + SSRProvider, + RendererProvider, + webLightTheme, +} from '@fluentui/react-components'; + +function App() { + return ( + + + +
{/* ... */}
+ + + + ); +} +``` + ### Next.js For basic instructions on getting Next.js set up, see [Getting Started](https://nextjs.org/docs/getting-started). From a2df9e109fcf18bb45a3aac80afb555428dfe802 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 8 Nov 2022 19:36:15 -0700 Subject: [PATCH 2/2] updating docs to include renderToStyleElements() --- .../src/Concepts/SSR/SSR.stories.mdx | 49 ++++++++++++++++--- 1 file changed, 41 insertions(+), 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 index 3e241b44ea0021..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,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 ( - +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