Использование Angular Universal для SPA и SEO Friendly. Одностраничное приложение SPA

  1. СПА в Angular: Недостатки
  2. Улучшения Google с точки зрения SPA
  3. Смысл SEO Angular Universal
  4. Что скрыто за «рендерингом на стороне сервера»
  5. Случай, когда пользователь сразу начинает работать со страницей Angular SPA
  6. Легкий старт с Angular Universal
  7. Работа по-разному на клиенте и на сервере
  8. Пользовательские директивы Angular в сторонних библиотеках и последствия их использования
  9. Заключение

Вы можете найти много разных форумов и чатов, где Угловой 6 обсуждается. Там вы можете найти ответы на такие вопросы, как создание клиентских приложений или создание SEO-интерфейса. Удивительно, но самая выдающаяся новинка в последнее время произошла на стороне сервера.

И здесь появляется Angular Universal. Это революционная технология, созданная для разработки совершенно нового поколения Интернета и Угловые мобильные приложения , Эта статья посвящена освещению его возможностей!

Angular - это фреймворк, который звучит знакомо всем, кто близок к сфере IT. То же самое можно сказать и об одностраничных приложениях. На самом деле, Угловые одностраничные приложения Есть много потенциальных выгод, и вот некоторые из них:

  • Более плавный и быстрый пользовательский интерфейс, так как большинство ресурсов HTML + CSS + Scripts загружаются одновременно. В дальнейшем будут загружаться только те данные, которые необходимы для рендеринга страницы, зависит от действий пользователя;

  • SPA работает здесь как технология на стороне клиента, HTML-страница статична, а все динамические изменения происходят в браузере. В более ранних версиях PHP, JSP, HTML смешивался с серверной логикой, и он создавался на сервере. Сервер должен был обрабатывать больше нагрузки.

Тем не менее, мы можем легко обобщить тот факт, что одностраничные приложения или SPA предоставляют довольно удобную производительность пользовательского интерфейса и пользовательский опыт!

Принимая во внимание все изложенные выше факты, вы можете задаться вопросом, почему Соглашения SPA не используются всеми, если они обеспечивают такое высокое качество обслуживания пользователей. Проверьте ниже для ограничений использования.

СПА в Angular: Недостатки

Во-первых, поисковая система не может точно знать, готова ли веб-страница к обработке или она все еще находится в процессе рендеринга. Например, поисковая система не может получить весь HTML, потому что загрузка SPA может быть еще в процессе или рендеринг еще не завершен. Только после того, как MVC будет введен в действие, страница станет доступной для поисковой системы для отображения ее данных.

Камнем преткновения является то, что движок должен иметь возможность выбрать подходящий момент для сканирования или просто определить, когда рендеринг закончится. В противном случае существует огромная возможность проиндексировать некоторый контент, который не готов для пользователя.

Кроме того, сложность индексации глубоких ссылок SPA является еще одной важной причиной, по которой SPA не так хороши в сотрудничестве с поисковыми системами.

Поддержка отсутствия истории HTML5 в браузерах привела к поиску альтернативы, такой как привязки закладок HTML (/ main # section2) для навигации между URL-адресами. Несмотря на то, что трудно проиндексировать страницы отдельно для поисковой системы, все еще существует множество подходов, как это сделать. Тем не менее, простой HTML всегда лучший план по сравнению с этими подходами.

Кроме того, вопрос производительности все еще остается жизненно важным для SPA, например, начальная загрузка медленная. Здесь многие согласны с тем, что HTML-решение превосходит SPA на несколько пунктов, например, по скорости (особенно это касается мобильных телефонов), поскольку запуск SPA занимает больше времени из-за обработки больших объемов JS.

Улучшения Google с точки зрения SPA

Хорошей новостью для нас является то, что Google улучшил подход к индексации одностраничных приложений. Таким образом, обе причины, упомянутые выше, не могут быть фактически правильными больше. Более того, недавний официальный отказ от использования IE9 приводит к улучшению доступности истории HTML5 на большинстве платформ.

В своем порядке это делает внедрение якорей URL необязательным, поскольку могут применяться простые URL, такие как / main / section2.

Конечно, это чудесная новость. Тем не менее, мы также должны учитывать другие поисковые системы, которые обрабатывают огромное количество трафика, такие как Baidu, популярный в Китае, Yahoo или Bing, столь любимый американцами.

Упомянутое выше не выглядит привлекательным для завоевания лояльных пользователей, хотя и не впадайте в депрессию слишком рано. Есть еще способ сохранить баланс между навигацией, оптимизацией и производительностью SEO для одностраничных приложений. Это SEO Angular Universal.

Смысл SEO Angular Universal

Короче говоря, Angular Universal предоставляет вам возможность создавать SEO-дружественные, быстрые и интерактивные сайты со всеми преимуществами одностраничных приложений.

Что скрыто за «рендерингом на стороне сервера»

Функциональность Angular Universal включает в себя нечто большее, чем просто предоставление визуализации разметки на стороне сервера. На вершине простого рендеринга вы получите урезанную версию Angular для создания необходимого HTML на стороне внешнего интерфейса. В результате вы получите англоязычное одностраничное приложение, оптимизированное для SEO, с более быстрым временем запуска благодаря получению основной полезной нагрузки HTML с сервера.

Случай, когда пользователь сразу начинает работать со страницей Angular SPA

Существует некоторое время между рендерингом исходного HTML и использованием Angular для запуска в качестве SPA. Angular Universal теперь предлагает решение для того, чтобы охватить момент, когда пользователь начинает запускать любое событие до того, как Angular вступит во владение. Такое событие будет записано и повторено. Событие, представленное сервером, записывается, и повторение происходит в SPA на стороне клиента.

Легкий старт с Angular Universal

Один из лучших советов - начать с его официального универсального стартера. Он предоставит вам готовое к исполнению приложение, содержащее экспресс-сервер с рендерингом на стороне сервера, который работает с полки.

В любом случае, при работе с первым проектом Angular Universal разработчик может столкнуться с некоторыми общими проблемами. Несмотря на то, что «все из коробки», есть еще моменты, о которых нужно знать. Ниже будет приведено несколько примеров кода, чтобы продемонстрировать реальные случаи использования Angular Universal и упростить жизнь.

Работа по-разному на клиенте и на сервере

Обычно мы ожидаем, что наше приложение будет работать примерно одинаково как на стороне клиента, так и на стороне сервера, без зависимости от API.

К сожалению, реальная жизнь немного отличается. Иногда нет возможности создать такой код, который будет работать так, как мы описали ранее. Более того, у нас может быть набор действий, которые мы хотим, чтобы они по-разному действовали на сервере и клиенте.

Например, когда необходимо использовать внешние библиотеки, которые вызывают элементы DOM, процесс на стороне сервера не может получить доступ к внутренним объектам браузера, что приведет к ошибкам. Рассмотрим случай, когда используется сторонняя библиотека Svg.js. Несомненно, некоторые ожидаемые ошибки появятся при построении проекта в режиме SSR (рендеринг на стороне сервера).

Чтобы разрешить их, мы добавили оболочку для этой конкретной библиотеки, которая проверяет, выполняется ли код на стороне клиента, и предоставляет доступ к методам библиотеки. Таким образом, мы избежали вызова библиотечных методов с сервера и избавились от ошибок сборки.

import {Inject, Injectable, PLATFORM_ID} из '@ angular / core'; import {isPlatformBrowser} из '@ angular / common'; @Injectable () экспортный класс SvgService {private _svg: any; конструктор (@Inject (PLATFORM_ID) private platformId: Object) {if (isPlatformBrowser (this.platformId)) {this._svg = require ('svg.js'); }} get (element) {if (isPlatformBrowser (this.platformId)) {return this._svg.get (element); }}}

SPA имеет один индексный файл, который вызывает проблемы, когда вам нужно добавить разные заголовки и метатеги для разных маршрутов. Это также связано с встраиванием в социальные сети, когда вы хотите показать предварительный просмотр после публикации страниц вашего сайта в Facebook или Twitter.

Чтобы обойти эту проблему, мы решили создать сервис, который бы динамически добавлял необходимые метатеги для каждой страницы.

Пример сервиса:

import {Injectable} из '@ angular / core'; import {Title, Meta} из '@ angular / platform-browser'; импортировать * как seoConfig из '../../../assets/config/seo-config.json'; @Injectable () экспортный класс SeoService {constructor (private titleService: Title, private meta: Meta) {} setMeta (page: string) {this.setTitle (seoConfig [page] .title); this.setNameAttribute ('description', seoConfig [page] .description); this.setNameAttribute ('Keywords', seoConfig [page] .keywords); this.setNameAttribute ('twitter: title', seoConfig [page] .title); this.setNameAttribute ('twitter: description', seoConfig [page] .description); this.setNameAttribute ('twitter: image', seoConfig [page] .image); this.setPropertyAttribute ('og: title', seoConfig [page] .title); this.setPropertyAttribute ('og: description', seoConfig [page] .description); this.setPropertyAttribute ('og: url', seoConfig [page] .url); this.setPropertyAttribute ('og: image', seoConfig [page] .image); } private setTitle (title: string) {вернуть this.titleService.setTitle (title); } private setNameAttribute (attribute: string, value: string) {if (this.checkAttributeExist (attribute, 'name')) {this.meta.updateTag ({name: attribute, content: value}); } else {this.meta.addTag ({имя: атрибут, содержимое: значение}); }} private setPropertyAttribute (атрибут: строка, значение: строка) {if (this.checkAttributeExist (attribute, 'property')) {this.meta.updateTag ({property: attribute, content: value}); } else {this.meta.addTag ({свойство: атрибут, содержимое: значение}); }} private checkAttributeExist (attribute: string, type: string) {return this.meta.getTag (`$ {type} =" $ {attribute} "`); }}

Компонент будет выглядеть так:

импортировать {SeoService} из '../core/services/seo.service'; @Component ({селектор: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']}) класс экспорта HomeComponent {конструктор (частный seoService: SeoService) {this.seoService.setMeta ('home'); }

Вот пример использования файла seo-config.json:

{"home": {"title": "2muchcoffee | Компания по разработке веб-и мобильных приложений", "description": "2muchcoffee - ведущая компания по разработке веб-приложений и мобильных приложений с полным стеком, специализирующаяся на JS-инфраструктурах для внешнего и внутреннего интерфейса. Создание кроссплатформенных платформ веб-приложения, гибридные и нативные мобильные приложения для существующих предприятий и MVP для стартапов. "," ключевые слова ":" 2muchcoffee, Angular, frontend, backend "," url ":" https://2muchcoffee.com "," image ":" /assets/img/content/opengraph/main.png "}}

Пользовательские директивы Angular в сторонних библиотеках и последствия их использования

Обычно разработчики используют сторонние сервисы, основанные на функциональности Angular, такие как пользовательские директивы, компоненты и т. Д. Здесь можно указать макет Angular Flex в качестве примера для верстки.

Это может вызвать неожиданную проблему, которая повлияет на работу пользователя. После рендеринга на стороне сервера документ, который получает клиент, уже содержит теги стилей с их стилями внутри. Однако @ angular / flex-layout начинает работать только после полной загрузки библиотек Angular.

Это должно быть сделано, чтобы обеспечить надлежащую работу упомянутых директив. В зависимости от производительности сети может пройти несколько секунд с момента загрузки исходного документа до получения документа Angular.

В течение этого периода пользователь может видеть страницу, на которой нет разметки flex. После запуска Angular все блоки занимают правильные места, но это вызывает мерцание.

Чтобы решить эту проблему с UX, мы решили отказаться от использования директив @ angular / flex-layout на главной странице и указать свойства flex-разметки в файле CSS.

Заключение

Плюсы рендеринга на стороне сервера могут расширяться со временем. Тем не менее, сегодня он предлагает отличный вариант для разработки SPA с его мобильными версиями, которые становятся Angular SEO-дружественными одностраничными приложениями и готовы к удобной навигации и Сайты электронной коммерции с Angular ,

Вот почему мы можем сказать, что теперь стало проще создавать приложения различного типа с Angular Universal и universal-startter, чтобы ваши приложения были проиндексированы.

В случае, если у вас остались какие-либо вопросы или предложения, не стесняйтесь связаться с нами и мы поможем вам в любом вопросе!