reactjs - Is it inevitable to get FOUC with react-jss?

Question

react-jss question:

1. Is there a risk of FOUC (A flash of unstyled content) with react-jss global styles, because we can not export styles as real css? (since the stylesheet from JSS is rendered only when the script is run).

2. Can I export a real stylesheet with webpack generated from 'react-jss'?

I'm using global jss styles in my root.tsx file like so:

import {createUseStyles} from 'react-jss'
import styles from '../../style/root.style'

and in root.style.ts

export default {
    '@global': {
        h1: {
            extend: typography.h1,
            color: colors.moss.regular,
        },
        h2: {
            extend: typography.h2,....

question from:https://stackoverflow.com/questions/65937173/is-it-inevitable-to-get-fouc-with-react-jss

Answer 1

To avoid FOUC, you need SSR, react-jss has an API that allows you to get the styles during SSR and insert them in the head of the document inside a style tag.

Later on, when js client is rendered, you can remove that style element that comes from SSR.

https://cssinjs.org/react-jss/#server-side-rendering