Question

我有一个使用cli预先构建的网站。在此之上，我有一个使用样式组件构建的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;

任何这样做的人，愿意提供一些提示吗？

Am on preact-cli 2.2.1

Answer 1

能够解决此问题，因此初始页面已异步加载。造成问题的原因。

Preact-CLI +样式化的组件。不补水

1 个答案: