menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Problems with SSR (weird injection locations)

August 10, 2019 at 1:21am

Problems with SSR (weird injection locations)

August 10, 2019 at 1:21am (Edited 3 years ago)
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
No one experiencing anything similar?

August 16, 2021 at 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