4

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

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

4

1 回答 1

3

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 使您能够在编译时预渲染视图中未更改的一些元素 - 对客户请求的响应例如：

<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 发送给客户，在浏览器渲染视图之后，JavaScript 进入操作并在其中进行更改（它正在交换“静态”页面与您的单页应用程序）。这导致了Angular Universal 早期页面的闪烁。另一个问题是在“静态”站点上执行的某些事件无法转移到 angular 呈现的视图中。据我所知，目前我们可以使用withServerTransition()from 方法解决这个问题BrowserModule。

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

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

于 2017-07-24T11:43:34.307 回答