gpt4 book ai didi

Angular 2 : possible to combine app shell together with universal rendering

转载 作者:太空狗 更新时间:2023-10-29 19:28:37 26 4
gpt4 key购买 nike

我有一个标准的 angular-cli 生成的项目。为它创建应用程序外壳并将其与 ng-universal 的服务器渲染技术相结合是否有意义?

如果是这样,那么最好的方法是什么?

最佳答案

Angular Universal 只是额外的服务器端渲染,99% 的方式与浏览器相同(几乎没有区别,即动画)。因此可以肯定的是,可以在现有的 Angular App 上实现它(即使它包含 AppShell)。

在我看来,这样做的好处很小。

让我们这样看:

  1. 标准 Angular 应用以“空”HTML 页面的形式出现在最终用户面前(在大多数情况下,HTML 只是:

<html>
<head>
<script type="text/javascript" src="yourapp.js" />
</head>
<body>
<app></app>
</body>
</html>

使用 JavaScript 包。 JavaScript 在客户端生成所有代码。这种方法绝对不是 SEO 友好的(并且在许多情况下对用户不友好)。

  1. AppShell 使您能够在编译时预渲染 View 中未更改的一些元素 - 例如,对客户请求的响应是:

<html>
<head>
<script type="text/javascript" src="yourapp.js" />
</head>
<body>
<app>
<nav> <a href=""> some element</a> <a href=""> another element</a></nav>
<component>dynamic content goes here</component>
</app>
<body>
</html>

  1. 最后,我们要谈谈 Angular Universal。该技术所做的是呈现完整页面(基于请求),将呈现的 HTML 发送给客户,浏览器呈现 View 后,JavaScript 开始执行操作并对其进行更改(它正在将“静态”页面与您的单页应用程序交换)。这导致了 Angular Universal 早期的页面闪烁。另一个问题是在“静态”网站上执行的一些事件无法转移到 Angular 呈现的 View 中。据我所知,目前我们可以通过使用 BrowserModule 中的 withServerTransition() 方法来解决这个问题。

您的建议可以加快服务器端呈现过程。当然,如果一个网站可以加载得更快,我们应该这样做。但是,另一方面,Angular 中的服务器端渲染工作得非常快。例如,我的 Angular Universal 应用程序样板 ( https://www.angular-universal-serverless.maciejtreder.com/ ) 在大约 1-2 秒后(在清除缓存等之后)在客户端准备就绪。因为它是一个 PWA,每次下一次访问都是离线完成的,所以加载时间不到 0.5 秒。

因此,在我的特殊情况下和许多其他情况(我猜),获得额外的 0,0001 秒没有多大意义。当然,一切都取决于您的需求。

关于 Angular 2 : possible to combine app shell together with universal rendering,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45278168/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com