Backport #3551 to v5 (#3566)

Author: kitten

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]);
     }
 

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);
     }