angular 2 : 可以将应用 shell 与通用渲染结合起来

Question

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

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

Answer 1

Angular Universal 只是额外的服务器端呈现，99% 的方式与浏览器相同（几乎没有区别，即动画）。所以可以肯定的是，可以在现有的 Angular 应用程序上实现它（即使它包含 AppShell）。

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

让我们这样看：

标准 Angular 应用作为 "empty" HTML 页面提供给最终用户（在大多数情况下 HTML只是：

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

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

我们终于来到了 Angular 环球影城。该技术所做的是呈现完整页面（基于请求），将呈现的 HTML 发送给客户，然后 after浏览器将呈现视图，JavaScript 开始执行操作并对其进行更改（它将 "static" 页面与您的单页应用程序交换）。这导致 Angular Universal 早期的页面闪烁。另一个问题是 "static" 站点上执行的某些事件无法传输到 angular 呈现的视图。据我所知，目前我们可以使用 BrowserModule.

withServerTransition()

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

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

angular 2 : 可以将应用 shell 与通用渲染结合起来

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

universal

angular

app-shell