Angular 2：可以将应用程序外壳与通用渲染结合起来

Question

Angular 2：可以将应用程序外壳与通用渲染结合起来

Ama*_*pta 5 universal angular app-shell

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

如果是这样，那么最好的方法是什么？

Answer 1

Mac*_*der 3

Angular Universal 只是额外的服务器端渲染，其完成方式与浏览器中 99% 相同（几乎没有差异，即动画）。因此，可以肯定的是，可以在现有的 Angular 应用程序上实现它（即使它包含 AppShell）。

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

让我们这样看一下：

标准Angular 应用程序以“空”HTML 页面的形式呈现给最终用户（在大多数情况下，HTML 只是：

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

Run Code Online (Sandbox Code Playgroud)

与 JavaScript 捆绑包。JavaScript 在客户端生成所有代码。这种方法绝对不利于 SEO（并且在许多情况下也不利于用户）。

AppShell 使您能够在编译时预先重新渲染视图中未更改的一些元素 - 例如，对客户请求的响应是：

<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>

Run Code Online (Sandbox Code Playgroud)

最后，我们来到了 Angular Universal。该技术的作用是渲染完整的页面（基于请求），将渲染的 HTML 发送给客户，在浏览器渲染视图后，JavaScript 执行操作并对其进行更改（它正在交换“静态”页面）与您的单页应用程序）。这导致了Angular Universal 早期页面的闪烁。另一个问题是，在“静态”站点上执行的某些事件无法传输到 Angular 渲染的视图中。据我所知，目前我们可以使用withServerTransition()中的方法来解决这个问题BrowserModule。

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

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

归档时间：	8 年，6 月前
查看次数：	1410 次
最近记录：	4 年，11 月前