Preact-CLI +样式组件。不会再水合

Question

我有一个网站，在preact使用cli建立。在此之上，我有一个用样式组件构建的UI-library。我想实现一个可靠的SSR实现。

我遵循了关于SSR的样式化组件文档中的说明。styled-components instructions on SSR

页面加载，预先渲染，但是当javascript开始工作时，它取代了HTML，而不是补充现有的HTML。这会导致页面在.3秒内变为空白。

文档中的示例感觉相当不确定。下面是我尝试实现该示例的方式：

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(<App />));
    sheet.getStyleElement();
}

if (typeof window !== 'undefined'){
    const FontLoader = require('./FontLoader').default;
    // Loading fonts, defered
    FontLoader();
}

export default App;

有没有人已经这样做了，并且愿意给出一些提示？

我在preact-cli 2.2.1上

Answer 1

能够解决这个问题，让最初的页面异步加载。导致了这个问题。