"Серверный рендеринг для Angular приложений"

Артем Палий
E-mail: artem.paliy@da-14.com

Для чего нам нужен серверный рендеринг (SSR)?

  • Повышение эффективности поисковой оптимизации (SEO)
     
  • Быстрый старт приложения для пользователей
     
  • Rich Media Sharing

Какие инструменты для SSR у нас есть?

  • PhantomJS

 

  • Webpack Prerender SPA Plugin

 

  • Angular Universal

 

 

 Скорость загрузки страницы *

* Согласно данным официального сайта Angular (https://angular.io)

JIT

 

AOT

 

Angular Universal

Высокая производительность браузера и скорость ответа сети

 

1.01

 

0.29

 

0.04

Симуляция 5x уменьшения скорости CPU и 3G сети (750kb/s)

 

37.3

 

5.5

 

0.4

Как работает Angular Universal SSR для Angular apps?

  • Генерирует статический HTML для заданных страниц во время билда/GET-запроса к сайту
     
  • Дает возможность поисковым ботам индексировать SPA
     
  • Дает возможность делиться rich media контентом 

Проблемы с которыми мы столкнулись:

  • Angular и Angular Universal не генерируют
    м
    ета-теги
     
  • Глобальные браузерные объекты не существуют на сервере

Использование  собственного сервиса для работы  с мета-тегами

  • DomAdapter
     
  • Document


     
  • Title

@angular/platform-browser 

Экранирование кода от выполнения
на сервере

3rd party компоненты с проблемами в которых мы столкнулись:

  • Google Analytics
     

  • JW Player
     

  • Clipboard

  • ng2-bootstrap
     

  • Masonry
     

  • Image cropper и пр. 

browser-app.module.ts

Создание заглушек для глобальных переменных

Создание заглушек для глобальных переменных

server-app.module.ts

Создание заглушек для 3rd party плагинов

webpack.prod.json

Что нужно для миграции с Angular 2.* на Angular 4.* c SSR?

  • Обновить Angular
     

  • Обновить TypeScript до >v2.1.*
     

  • Установить Angular Universal
    Angular Universal переехал в core Angular 4.*
     

  • Удалить неиспользуемые зависимости и патчи
    angular2-universal
    angular2-universal-polyfills
    __workaround.*.ts

Чем заменить
angular2-universal-polyfills?

Чем заменить isBrowser?

Чем заменить UniversalModule?

browser.module.ts

server.module.ts

Чем заменить UniversalModule?

Работа  с мета-тегами внутри Angular

  • Title
     
  • MetaDefinition
     
  • Meta

@angular/platform-browser 

Запускаем Angular на сервере

SSR c Angular Express Engine

Спасибо!