Hi! Been toying around with SSR in a custom NodeJS-server and got some empty styles-tag generated in head while another with the correct contents are injected into body. Here's some code to stare at:

The serverside situation:

let PRE_RENDERED_APP = "",
    INITIAL_STATE    = {},
    STYLE_TAGS       = "";
if (process.env.NODE_ENV === "production") {
  Loadable.preloadAll().then(
    _ => {
      const sheet = new ServerStyleSheet();
      const configureStore = 
        require("../../../../../client/src/store/configure_store").default;
      const StaticRoot = 
        require("../../../../../client/src/containers/Root.static").default;
      const store = configureStore();
      INITIAL_STATE    = store.getState().toJS();
      PRE_RENDERED_APP = renderToString(
        sheet.collectStyles(<StaticRoot store={store} />));
      STYLE_TAGS = sheet.getStyleTags();
    });
}
export const getSiteIndex = (_, cb) => 
  getTemplate(
    "index",
    { 
      head:  { initialState: INITIAL_STATE, styleTags: STYLE_TAGS },
      body:  { app: PRE_RENDERED_APP }
    },
    (err, str) => 
      !err && str
      ? cb(200, str, "text/html")
      : logAndCallback(err, str, cb));

The getTemplate above runs a function that loads an ejs-template with given data. The correspoding template looks like this:

<!DOCTYPE html>
<html>
  <head>
    <!-- General purpose settings: -->
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en-us">
    <% if (head && head.initialState) { %>
      <!-- SSR scripts: -->
      <script>
        window.__PRELOADED_APP_STATE__ = <%- 
          JSON.stringify(head.initialState).replace(/</g, '\\u003c')
        -%>
      </script>
    <% } %>
    <!-- Static assets: -->
    <link type="image/x-icon" rel="icon" href="favicon.ico" />
    <!-- Styles: -->
    <% global.stylesPaths.forEach(function(path) { %>
      <link rel="stylesheet" href=<%- JSON.stringify(path) -%>>
    <% }); %>
    <% if (head && head.styleTags) { %>
      <%= head.styleTags %>
    <% } %>
  </head>
  <body>
    <div id="page-content">
      <div id="root">
        <% if (body && body.app) { %>
          <%= body.app %>
        <% } %>
      </div>
      <div class="footer">
        <div class="copyright">
          Copyright <%= global.yearCreated %> <%= global.companyName %> | All rights reserved
        </div>
      </div>
    </div>
    <% global.scriptPaths.forEach(function(path) { %>
      <script type="text/javascript" src=<%- JSON.stringify(path) -%>></script>
    <% }); %>
  </body>
</html>

With those out of the way, the weird end result I happen to get is:

<!DOCTYPE html>
<head>
  <!-- ...Preceding omitted for brevity... -->
  <style data-styled="active" data-styled-version="5.0.0-beta.8"></style>
</head>
<body>
<style data-styled data-styled-version="5.0.0-beta.8">.lboJMk{list-style-type:none;text-align:right;padding:0   75px;float:right;}
data-styled.g1[id="NavBar__StyledNavBar-sc-2tgmuj-0"]{content:"lboJMk,"}
.fRyoEk{display:inline-block;padding:10px 10px 0 10px;}
data-styled.g2[id="NavBar__StyledNavBarItem-sc-2tgmuj-1"]{content:"fRyoEk,"}
.gmkZBb{text-transform:uppercase;font-weight:900 !important;font-size:11px;}
data-styled.g3[id="NavBar__StyledNavLink-sc-2tgmuj-2"]{content:"gmkZBb,"}
.bcTdDL{background-color:#fff;border-width:0 0 1px 0;border-style:solid;border-color:#fff;box-shadow:0 -25px 11px 20px #000;position:fixed;top:0;left:0;width:100%;padding:20px 0;min-width:1200px;}
data-styled.g4[id="PageHeader__StyledPageHeader-uq33m2-0"]{content:"bcTdDL,"}
.gWCXdT{text-align:left;padding:0 0 0 90px;float:left;}
data-styled.g5[id="PageHeader__HeaderLogo-uq33m2-1"]{content:"gWCXdT,"}
.gpGTiN{width:50px;}
data-styled.g6[id="PageHeader__HeaderLogoImg-uq33m2-2"]{content:"gpGTiN,"}
.bugkjm{margin-top:150px;width:1000px;margin:150px auto;}
data-styled.g7[id="App__StyledContent-sc-8tptxw-0"]{content:"bugkjm,"}
</style>
<!-- The actual body then follows -->
</body>

Oddly the page renders OK (apart drawing the style rules inside the body). It seems that the initial SSR render somehow adds the style into the wrong place. I may just miss something here though..

August 17, 2019 at 11:07pm

4lph4-Ph4un@4lph4-ph4un

11:07pm

No one experiencing anything similar?

August 16, 2021 at 12:15am

Ilia Andrienko@lowpolybrain

12:15am

I am.

And can not find any information about it... Apparently it is used for rehydration somehow, but it does not seem valid CSS.

Anyway, I ended up regexing them out, simple and stupid. Probably if it wasn't a small thing I would end up not using styled components...

Edited