8

从他们推出 Angula2 + Universal 的第一天起，我就一直在使用它，但今天我对它的实际工作原理感到困惑。

在他们的示例中，您会在 server.ts 文件中找到：

app.get( '/data.json' , ( req , res ) => {
    res.json( {
        data : 'This fake data came from the server.'
    } );
} );

如果您运行该应用程序，右键单击并查看页面源代码，您会在源代码中找到“此虚假数据来自服务器”，这意味着页面已在服务器中呈现？（ 这个对吗 ？ ）

到目前为止，太棒了。

接下来是在 app.ts 中，您可以找到：

ngOnInit () {
        setTimeout( () => {
            this.server = 'This was rendered from the server!';
        } , 10 );
}

同样，该文本也可以在页面源代码中找到。

现在这对我来说很奇怪：

如果您出于任何原因增加服务器延迟，例如：

app.get( '/data.json' , ( req , res ) => {
    setTimeout( function() {
        res.json( {
            data : 'This fake data came from the server.'
        } );
    } , 2000 ); // Added setTimeOut with 2 seconds .
} );

这种方式，页面源不会得到文本，但是，如果你这样做：

app.get( '/data.json' , ( req , res ) => {
    setTimeout( function() {
        res.json( {
            data : 'This fake data came from the server.'
        } );
    } , 2 ); // **Added setTimeOut with 2 milli seconds.**
} );

这一篇，你可以在服务器里找到文字.!!!!!!

到目前为止，根据我的测试，我猜测如果 ajax 调用延迟太长（我猜超过一秒？），您将不会从服务器端渲染中受益。

但 ：

但是，如果您增加 app.component.ts 中的 timeOut，例如：

ngOnInit () {
        setTimeout( () => {
            this.server = 'This was rendered from the server!';
        } , 3000 );  // Increased to 3 seconds
}

您仍然可以获得服务器端渲染，并且源页面将渲染文本！

这里发生了什么事 ？

显然不是所有的 ajax 调用都可以低于 1 秒，那么无论如何使用通用有什么好处呢？

4

0 回答 0