angular 2: возможно объединить оболочку приложения с универсальным рендерингом

У меня есть стандартный проект angular-cli. Имеет ли смысл создавать для него как оболочку приложения, так и комбинировать ее с техникой рендеринга сервера ng-universal?

Если так, то каков наилучший способ это сделать?

Источник

1 ответ

Решение

Angular Universal - это просто дополнительный рендеринг на стороне сервера, выполненный на 99% так же, как в браузере (различий мало, т.е. анимации). Так что наверняка можно реализовать его в существующем приложении Angular (даже если оно содержит 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. Наконец, мы подходим к угловому универсальному. Этот метод выполняет рендеринг всей страницы (на основе запроса), отправку отрендеренного HTML-кода клиенту, и после того, как браузер отобразит представление, JavaScript начинает действовать и вносит в него изменения (он заменяет "статическую" страницу). с вашим приложением на одну страницу). Это было причиной мерцания страницы в ранние времена Angular Universal. Другая проблема заключалась в том, что некоторые события, выполняемые на "статическом" сайте, не могли быть перенесены в представление, представленное angular. Насколько я знаю, в данный момент мы можем решить эту проблему, используя withServerTransition() метод из BrowserModule,

Ваше предложение может ускорить процесс рендеринга на стороне сервера. Конечно, если сайт может быть загружен быстрее, мы должны это сделать. Но, с другой стороны, рендеринг на стороне сервера в Angular работает очень быстро. Например, мой шаблон приложения Angular Universal ( https://www.angular-universal-serverless.maciejtreder.com/) готов на стороне клиента через ~1-2 секунды (после очистки кэша и т. Д.). Поскольку это PWA, каждый следующий визит выполняется в автономном режиме, поэтому время загрузки составляет менее 0,5 сек.

Так что в моем конкретном случае и во многих других (я полагаю) нет особого смысла получать дополнительные 0,0001 сек. Конечно, все зависит от ваших потребностей.

Источник
Другие вопросы по тегам