title: Preact-CLI + styled-components. Doesn't re-hydrate
body: <p>I have a site, built in preact using the cli. On top of this I have a UI-library built with styled-components. I want to achieve a solid SSR implementation.</p>
  
  <p>I've followed the instructions in the styled-components docs regarding SSR.
  <a href="https://www.styled-components.com/docs/advanced#example" rel="nofollow noreferrer">styled-components instructions on SSR</a></p>
  
  <p>The page loads, prerendered, however when the javascript kicks in, instead of hydrating existing HTML, it replaces the HTML. This results in the page going blank for .3 seconds.</p>
  
  <p>The example in the docs feel rather inconclusive. Here is how I tried to implement the example:</p>
  
  <pre><code>import { ServerStyleSheet } from 'styled-components';
  import { h, render } from 'preact';
  import { default as renderToString } from 'preact-render-to-string';
  import './style'; // eslint-disable-line
  import App from './components/app';
  
  if (typeof window === undefined) {
      const sheet = new ServerStyleSheet();
      renderToString(sheet.collectStyles(&lt;App /&gt;));
      sheet.getStyleElement();
  }
  
  if (typeof window !== 'undefined'){
      const FontLoader = require('./FontLoader').default;
      // Loading fonts, defered
      FontLoader();
  }
  
  export default App;
  </code></pre>
  
  <p>Anyone who has done this, and is willing to give some hints?</p>
  
  <p>Am on preact-cli 2.2.1</p>