"Серверный рендеринг для 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
Спасибо!
Copy of deck
By maestroart
Copy of deck
- 159