You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am now working on Docusaurus (which is a static site generator) with Fluent UI, and I don't know how to setup SSR for Fluent UI, there's no any useful information on Internet.
What I've known:
Fluent UI use a lib called merge-styles to achieve its CSS-in-JS support. merge-styles will generate CSS class for each style set, and these classes must be written into HTML <head></head> tag to be active. This lib uses an ID counter which will add an ID suffix to each class. In general, both mergeStyles and mergeStyleSets call will generate some CSS classes, and in server-side and client-side, the value of ID counter may be different. Docusaurus is a pure static site generator which has a building bundle without any server code. It will pre-execute all codes on building and uses the result of each page as final generated html file. So, in building process, Fluent UI seems generated a set of stylesheets with a set of IDs, and if I use:
import{Stylesheet,resetIds}from"@fluentui/react";// These codes are run on the server side.resetIds();letstylesheet=Stylesheet.getInstance();letserializedStylesheet=stylesheet.serialize();letrules=stylesheet.getRules(true);// Inject rules into generated codes as <style data-merge-styles="true">{rules}</style>letscript=` window.FabricConfig = window.FabricConfig || {}; window.FabricConfig.serializedStylesheet = ${serializedStylesheet};`;// Inject script into generated codes as <script>{script}</script>
I actually will get another set of classNames and rules with totally different ID, and that makes my page looks a mess.
I saw another way is renderStatic, but I think I cannot use it because I cannot get the real root component of Docusaurus page.
I know that Stylesheet is an object which is registered in a variable named _global, and this variable is initialized in the file Stylesheet.ts. This initialization process will first check if there is an object called window.FabricConfig and then assign it or an empty object to _global. When we call getInstance(), this function will search _global for an existing Stylesheet object, and if there's no such object, it will initialize a brand new instance with all properties have a same value {}. So, what is confusing me is:
Why the client uses a new Stylesheet object instead of the one I've already injected to the page's window? (I can make sure that the injected codes are executed before all other scripts)
The Stylesheet object is initialized with all properties are {}, so, where the values of Stylesheet object that I injected come from?
How could I get the actual Stylesheet object used in server-side rendering?
I hope there could be some experts of this question could do me a favour. Thanks.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
I am now working on Docusaurus (which is a static site generator) with Fluent UI, and I don't know how to setup SSR for Fluent UI, there's no any useful information on Internet.
What I've known:
Fluent UI use a lib called merge-styles to achieve its CSS-in-JS support. merge-styles will generate CSS class for each style set, and these classes must be written into HTML
<head></head>tag to be active. This lib uses an ID counter which will add an ID suffix to each class. In general, bothmergeStylesandmergeStyleSetscall will generate some CSS classes, and in server-side and client-side, the value of ID counter may be different. Docusaurus is a pure static site generator which has a building bundle without any server code. It will pre-execute all codes on building and uses the result of each page as final generated html file. So, in building process, Fluent UI seems generated a set of stylesheets with a set of IDs, and if I use:I actually will get another set of classNames and rules with totally different ID, and that makes my page looks a mess.
I saw another way is
renderStatic, but I think I cannot use it because I cannot get the real root component of Docusaurus page.I know that Stylesheet is an object which is registered in a variable named
_global, and this variable is initialized in the fileStylesheet.ts. This initialization process will first check if there is an object calledwindow.FabricConfigand then assign it or an empty object to_global. When we callgetInstance(), this function will search_globalfor an existing Stylesheet object, and if there's no such object, it will initialize a brand new instance with all properties have a same value{}. So, what is confusing me is:{}, so, where the values of Stylesheet object that I injected come from?I hope there could be some experts of this question could do me a favour. Thanks.
Beta Was this translation helpful? Give feedback.
All reactions