2

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

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

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>finally 有内容，因此页面被重新渲染。

我的问题是，在解决所有动态导入之前，如何才能使路由器或应用程序不会在客户端（上图）上呈现？

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

import(path).then(render)

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

4

2 回答 2

0

这里的关键是要知道你在服务哪个路径并将它的包<script defer>放在head中，所以当 preact 被加载时（可能是通过script身体底部的标签），你的路径的 JS 被加载并且你的 div 没有不要空白。

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

于 2018-01-19T00:22:51.467 回答
0

酷，我想我明白你在说什么。

因此，当您进行 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

让我知道这是否有帮助。

于 2018-02-02T21:59:44.907 回答