Preact路由器在解析异步路由之前不会呈现

Question

我有一个应用程序是服务器端呈现，然后呈现在客户端添加功能，然而，虽然第一次有意义的油漆的时间约为1000 as，一旦客户端脚本下载，页面变成白色，几秒钟后，它再次呈现(客户端)。

经过一些调试之后，我意识到这是因为我正在这样做：

Preact.render(<App />, document.getElementById('root'));

应用程序所在的地方：

import { Component } from 'preact';
import { Router } from 'preact-router';
import AsyncRoute from 'preact-async-route';

export default class App extends Component {
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Router onChange={ this.handleRoute }>
          <AsyncRoute path="/" getComponent={() => import('../routes/portfolio').then(module => module.default)} />
                </Router>
            </div>
        );
    }
}

现在的问题是，html是从服务器发送的，然后呈现。但是，一旦执行了客户机脚本，<div id="app"></div>就会被刷新，因为AsyncRoute还没有加载，这意味着没有什么可渲染的，所以页面变白了。在加载AsyncRoute之后，<div id="app"></div>最终有了内容，因此页面将被重新命名。

我的问题是，如何才能使路由器或应用程序在客户端(上面)被呈现，直到所有的动态导入都得到解决？

注意:我不能简单地这样做：

import(path).then(render)

因为当我添加更多的组件时，我将无法判断要导入哪些路径，因此AsyncRoute组件

Answer 1

这里的关键是知道您正在服务哪个路径，并将它的包作为<script defer>放在head中，因此在加载preact时(可能是通过正文底部的script标记)，您的路径的JS将被加载，您的div不会变为空。

或者，换句话说，loadComponent需要的脚本实际上可以在缓存中使用。

Answer 2

好吧，我想我明白你的意思了。

因此，当你第一次看到所有的内容，然后当AsyncRoute获取文件时，当文件被下载时，内容变为空白。

是对的吗？

在本例中，我给您做了一个简单的演示：https://github.com/prateekbh/preact-async-ssr

这个解决方案并不是很干净(到目前为止还没有找到任何干净的解决方案，即使在有反应的土地上也是如此)，但下面是我所做的：

在删除SSRed标记之前，我将其保存在变量中，然后将其用作AsyncRoute中的加载器组件。详细信息： https://github.com/prateekbh/preact-async-ssr/blob/master/client-routes/App/app.js#L25-L39

如果这有帮助的话请告诉我。