diff --git a/packages/styled-components/src/constructors/createGlobalStyle.js b/packages/styled-components/src/constructors/createGlobalStyle.js index 8d648eb5..a66b9886 100644 --- a/packages/styled-components/src/constructors/createGlobalStyle.js +++ b/packages/styled-components/src/constructors/createGlobalStyle.js @@ -51,15 +51,19 @@ export default function createGlobalStyle( ); } - if (__SERVER__) { + if (styleSheet.server) { renderStyles(instance, props, styleSheet, theme, stylis); - } else { + } + + if (!__SERVER__) { // this conditional is fine because it is compiled away for the relevant builds during minification, // resulting in a single unguarded hook call // eslint-disable-next-line react-hooks/rules-of-hooks useLayoutEffect(() => { - renderStyles(instance, props, styleSheet, theme, stylis); - return () => globalStyle.removeStyles(instance, styleSheet); + if (!styleSheet.server) { + renderStyles(instance, props, styleSheet, theme, stylis); + return () => globalStyle.removeStyles(instance, styleSheet); + } }, [instance, props, styleSheet, theme, stylis]); } diff --git a/packages/styled-components/src/sheet/Sheet.js b/packages/styled-components/src/sheet/Sheet.js index 5c2302ff..c7807aaa 100644 --- a/packages/styled-components/src/sheet/Sheet.js +++ b/packages/styled-components/src/sheet/Sheet.js @@ -31,6 +31,8 @@ export default class StyleSheet implements Sheet { options: SheetOptions; + server: boolean; + tag: void | GroupedTag; /** Register a group ID to give it an index */ @@ -50,9 +52,10 @@ export default class StyleSheet implements Sheet { this.gs = globalStyles; this.names = new Map(names); + this.server = !!options.isServer; // We rehydrate only once and use the sheet that is created first - if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) { + if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) { SHOULD_REHYDRATE = false; rehydrateSheet(this); }