Javascript 前置路由器不'；在解决异步路由之前，请不要渲染

我有一个应用程序，它是服务器端渲染的，然后在客户端渲染以添加功能，然而，尽管第一次有意义的绘制的时间约为1000毫秒，但一旦客户端脚本下载，页面就会变白，几秒钟后再次渲染（客户端）

经过一段时间的调试，我意识到这是因为我在这样做：

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

---

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

异步路由

组件

这里的关键是要知道您服务的是哪个路径，并将其捆绑包作为

放在头部，因此在加载preact时（可能通过正文底部的

script

标记）加载路径的JS，并且div不会变为空白

---

或者，换句话说，

loadComponent

所需的脚本实际上在缓存中可用。

酷，我想我明白你的意思了

因此，当您SSR时，首先看到所有内容，然后当

AsyncRoute

获取文件时，文件下载时内容变为空白

是这样吗

在本例中，我为您制作了一个简单的演示：

该解决方案不是很干净（到目前为止，即使在React land也找不到任何干净的解决方案），但我做了以下工作：

在删除SSRed标记之前，我将其保存在一个变量中，然后将其用作AsyncRoute中的加载程序组件。详细信息如下：

---

让我知道这是否有帮助。

请正确阅读问题。这不是我问的问题。你只是在回避这个问题。如果出现这种情况，我非常抱歉。你能分享一下你是如何在

asynchroutes

上进行SSR的吗？因为renderToString基本上是在不履行

require的承诺的情况下退出的。请确保

或

System.import

我渲染初始视图所需的内容，然后延迟加载其余部分，这意味着我不打算立即加载它，这样我就可以快速完成第一次绘制（交互时间不太重要，因为这是一个污点），然后延迟加载初始块（称为main），然后延迟加载当前视图中交互所需的其他块。当前，使用preact router模块意味着，一旦加载了初始块（延迟），dom将清除，屏幕将变白，然后在加载其他所需的块（

import（'chunk'）

）后，视图将重新绘制（在后面）我想要的是，一旦初始块被延迟加载，我会等到使用

require

动态导入当前视图所需的所有其他块，然后再重新加载。酷，我想我明白你的意思了。因此，当你SSR时，你首先看到所有内容，然后

AsyncRoute

获取文件内容下载文件时，t变为空白。

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>
        );
    }
}

import(path).then(render)