Question

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

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

Answer 1

Angular Universal只是额外的服务器端渲染，与浏览器相同的方式完成99％（差异很小，即动画）。因此，可以确保在现有的Angular App上实现它（即使它包含AppShell）。

在我看来，这样做只有很小的优点。

让我们这样看一下：

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

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

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

角度2：可以将app shell与通用渲染结合起来

1 个答案: