Question

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

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

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

app是：

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加载时（可能是{{1}在主体的底部标记），你的路径的JS被加载，你的div不会变成空白。

或者，换句话说，script将要求的脚本实际上在缓存中可用。

Answer 2

很酷，我想我得到了你说的话。

因此，当您SSR时，您首先看到所有内容，然后在AsyncRoute获取文件时，文件下载时内容会变为空白。

是不是？

在这种情况下，我为您制作了一个简单的演示：https://github.com/prateekbh/preact-async-ssr

解决方案不是很干净（即使在React土地上也无法找到任何干净的解决方案），但这就是我所做的：

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

如果有帮助，请告诉我。

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

2 个答案: