title: SSR with styled-components - when app.js loads site missing few styles
body: <p>I have SSR implemented with <code>styled-components</code>.</p>
  
  <p>When the page loads with SSR, everything looks good. However, when the <code>app.js</code> is loaded and hydrated together with SSR version, page is missing some styles and few elements breaks.</p>
  
  <p>Whats more - when I turn app locally, with <code>npm start</code> or basically just remove my SSR, everything works fine and styles are being applied correctly. </p>
  
  <p><strong>Important</strong>: when I enter the page and <code>app.js</code> loads and styles are broken, if I change route - the new route appears with applied styles correctly and the problem is... gone. </p>
  
  <ul>
  <li>SSR loads - <strong>styles are fine</strong></li>
  <li>then after few secs app.js loads (hydration process) - <strong>styles are broken</strong></li>
  </ul>
  
  <hr>
  
  <p><strong>running app locally</strong> - no problems with styles</p>
  
  <p><strong>running app without SSR</strong> - no problems with styles</p>
  
  <hr>
  
  <p>So in a brief - if I use SSR im missing some styles, the SSR itself returns proper styles, but after hydration with <code>app.js</code> few components are broken. </p>
  
  <p>I bet it's probably an issue with <code>styled-components</code>. The SSR works fine and everything else, except that one component which is missing styles. </p>
  
  <hr>
  
  <p>Im aware that it's rather uncomplete information about my case, but to show every part which could be responsible for this error, I should publish whole project, however maybe you experienced similar case and you would help me somehow. Thanks. </p>
  
  <p><strong>Edit</strong>: My <code>babel-styled-component-plugin</code> config:</p>
  
  <pre><code>['babel-plugin-styled-components', {
      ssr: true,
      displayName: false,
      fileName: false,
      transpileTemplateLiterals: false,
      minify: false,
  }],
  </code></pre>