[Bug]: FluentProvider stylesheet (CSS vars for theme) are not server-side rendered

[paularmstrong-msft]

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/github/paularmstrong-msft/fluentui-ssr-issue/draft/silent-smoke

Bug Description

Actual Behavior

No theme variables are server-side rendered, causing the site to initially display with no colors, incorrect fonts, incorrect spacing, etc, etc.

Expected Behavior

When following the SSR instructions, it is expected that ALL styles are rendered to the page and do not have a flash of unstyled content (FOUC).

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[sopranopillow]

Hi @paularmstrong-msft, your repro doesn't show the issue. I think it's probably related to this #23620. The fix would be to change your next.config.js file to the following:

module.exports = {
  reactStrictMode: false
};

You can see that the sandbox you provided has StrictMode turned off. Let me know if you still have issues after making the change. Thanks!

[paularmstrong-msft]

@sopranopillow Set your network inspector to "slow 3g" or turn of javascript in your browser to reproduce the issue. Also, the next.config.js has strict mode disabled: https://codesandbox.io/p/github/paularmstrong-msft/fluentui-ssr-issue/draft/silent-smoke?file=%2Fnext.config.js

[JustSlone]

I can confirm that I do see a FOUC briefly in the above repro

[layershifter]

Indeed, FluentProvider does not render CSS variables on a server. On of ideas to on how to solve it is to render them inline on a server like Emotion does:
https://github.com/emotion-js/emotion/blob/92be52d894c7d81d013285e9dfe90820e6b178f8/packages/react/src/global.js#L69-L76

However, we need to ensure that it will work with portals.

[ahmed-adly-khalil]

I have the same issue, my solution with Next JS 13 is to use use client and render everything client side which is not a good solution and causes a delay in rendering / slowness

[AkiraVoid]

So, will this be fixed or something? And when will this be fixed? @layershifter

[kletse]

Any update on this yet?

The documentation states:
"Fluent UI React v9 fully supports Server-Side Rendering."
https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-basic-setup--page

This issue actually makes this statement incorrect, as most components won't be styled correctly with the CSS and HTML served to the client until javascript is loaded.

I can't migrate a project (a public website) from v8 to v9 as long as this is the case.

[layershifter]

So, will this be fixed or something? And when will this be fixed?

Yes, the plan is to fix it in one of our upcoming sprints.

[layershifter]

Indeed, FluentProvider does not render CSS variables on a server. On of ideas to on how to solve it is to render them inline on a server like Emotion does: https://github.com/emotion-js/emotion/blob/92be52d894c7d81d013285e9dfe90820e6b178f8/packages/react/src/global.js#L69-L76

However, we need to ensure that it will work with portals.

Seems to work like it should, https://codesandbox.io/s/kind-morning-1n281k?file=/src/App.js