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

Question

我有一个网站，使用 cli 内置 preact。最重要的是，我有一个使用样式组件构建的 UI 库。我想实现一个可靠的 SSR 实现。

我已按照样式组件文档中有关 SSR 的说明进行操作。 styled-components instructions on SSR

页面加载，预渲染，但是当 javascript 启动时，它不是水合现有的 HTML，而是替换 HTML。这会导致页面空白 0.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

能够解决它，初始页面加载异步。导致问题的原因。