angular 2:可以将应用程序外壳与通用渲染结合在一起 [英] angular 2 : possible to combine app shell together with universal rendering
问题描述
我有一个标准的angular-cli生成的项目. 为此既创建应用程序外壳，又将其与ng-universal的服务器呈现技术结合起来有意义吗?
I have a standard angular-cli generated project. Does it make sense to create both an app shell for it and, also combine it with ng-universal's server rendering technique ?
如果是这样，那么最好的解决方法是什么?
If so , then what's the best way to go about it ?
推荐答案
Angular Universal只是附加的服务器端渲染，与浏览器的渲染方式相同，达到99％(几乎没有差异，即动画).因此，可以肯定的是，可以在现有的Angular App上实现它(即使它包含AppShell).
Angular Universal is just additional server-side rendering, done 99% same way as in the browser (there is few differences, ie animations). So for sure it is possible to implement it on existing Angular App (even if it contain AppShell).
我认为这样做的专家很少.
In my opinion, there is only small pros of doing that.
让我们这样看:
- Standard Angular应用作为空" HTML页面进入最终用户(在大多数情况下，HTML只是:
- Standard Angular app comes to the end user as a "empty" HTML page (in most cases the HTML is just:
<html>
<head>
<script type="text/javascript" src="yourapp.js" />
</head>
<body>
<app></app>
</body>
</html>
带JavaScript包. JavaScript正在客户端生成所有代码.这种方法绝对不是SEO友好的(在许多情况下也不是用户友好的).
with JavaScript bundle. JavaScript is generating all code on the client-side. This approach is definitely not SEO friendly (and in many cases not user-friendly).
- 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.该技术正在做的是呈现 complete 页面(根据请求)，将呈现的HTML发送给客户，然后 浏览器呈现视图之后，JavaScript便开始行动并对其进行更改(它将静态"页面与您的单页应用"交换).那就是在Angular Universal早期导致页面的 blink .另一个问题是在静态"站点上执行的某些事件无法转移到用角度渲染的视图上.据我所知，目前我们可以使用
BrowserModule中的withServerTransition()方法来解决此问题.
- Finally, we are coming to the Angular Universal. What this technique is doing is rendering the complete page (based on request), sends rendered HTML to the customer, and after the browser will render view, JavaScript comes to the action and makes changes in it (it is swapping the "static" page with your Single Page App). That was causing the blink of the page at the early times of Angular Universal. The other problem was that some events performed on the "static" site could not be transferred to the view rendered by angular. As far as I know, at this moment we can solve this problem by using
withServerTransition()method fromBrowserModule.
您的建议可以加快服务器端渲染过程.当然，如果可以更快地加载网站，我们应该这样做.但是，从另一方面来说，Angular中的服务器端渲染确实非常快.例如，我的Angular Universal应用样板( https://www.angular-universal-大约1-2秒(清除缓存等之后)之后，就可以在客户端准备好serverless.maciejtreder.com/.因为它是PWA，所以每次下一次访问都是脱机完成的，因此加载时间不到0.5秒.
Your proposal could speed up the server-side rendering process. Of course, if a website can be load faster, we should do that. But, from the other hand, server-side rendering in Angular works really fast. For example, my boilerplate of the Angular Universal app (https://www.angular-universal-serverless.maciejtreder.com/) is ready on the customer end after ~1-2 seconds (after clearing cache etc). Because it is a PWA, every next visit is done offline, so load time is under 0.5 sec.
所以在我的特殊情况下和其他许多情况(我想)，没有什么必要再花这0,0001秒的时间了.当然，一切都取决于您的需求.
So in my particular case and many others (I guess) there is no much sense to get that additional 0,0001 sec. Of course, everything depends on your needs.
这篇关于angular 2:可以将应用程序外壳与通用渲染结合在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
