Требования для удовлетворения потребностей пользователей сети быстро растут, и становится все труднее выполнять эти требования с помощью традиционных веб-страниц, отображаемых на стороне сервера. Пользователи хотят немедленной обратной связи и плавных переходов. Одностраничные приложения JavaScript (SPA) могут обеспечить именно такие высокочувствительные пользовательские интерфейсы без замораживания загрузки страниц.
Соглашения SPA быстро заменяют традиционные пользовательские интерфейсы веб-приложений на стороне сервера. Приведенная ниже диаграмма демонстрирует эту тенденцию с наиболее популярной в настоящее время платформой SPA AngularJS против традиционных технологий рендеринга на стороне сервера. Исторически популярный PHP тоже находится в упадке, но не учитывает читабельность графика.
Несмотря на то, что SPA отлично подходят для создания адаптивных приложений, таких как пользовательский интерфейс, и предоставляют много преимуществ по сравнению со статическими HTML-сайтами, отображаемыми на стороне сервера, они имеют несколько фундаментальных недостатков. Самая большая проблема заключается в том, что большинство сканеров и ботов еще не могут отображать контент JavaScript, за исключением Google и Bing до некоторого уровня.
Абсолютно важно, чтобы любой общедоступный сайт был доступен для поисковых роботов и социальных сетей. Для этого необходимо, чтобы сканеры и боты должны были обслуживать предварительно отрендеренный статический HTML запрошенного контента вместо SPA. Некоторые новейшие инфраструктуры SPA, такие как ReactJS и Angular 2, предоставляют средства для предварительного рендеринга на стороне сервера, но в большинстве других, таких как AngularJS 1.X, предварительный рендеринг должен быть реализован вручную.
Предварительная визуализация
Предварительная визуализация означает, что SPA выполняется с помощью браузера, такого как PhantomJS, и выведенный статический снимок состояния HTML состояния приложения возвращается запрашивающей стороне вместо фактической SPA. Таким образом, запрашивающей стороне не нужно выполнять какой-либо JavaScript, чтобы получить полностью визуализированный HTML.
Самый простой способ добиться предварительной визуализации - использовать приложение с открытым исходным кодом NodeJS, например PreRender , Вы можете запустить его на своих компьютерах или использовать предложения SAAS, такие как https://prerender.io/ ,
Теперь все, что вам нужно сделать, это определить, когда бот или сканер запрашивает страницу, и ответить с помощью предварительно представленного статического HTML. Заголовок HTTP-запроса 'User-Agent' - это самый простой способ обнаружить сканеры и ботов. Есть готовые конфигурации, доступные для большинства популярных платформ, таких как этот для Nginx , Существует одна серьезная проблема с заголовками User-Agent и CloudFront, которую я подробно опишу ниже.
CloudFront
Amazon Web Services (AWS) имеет замечательную управляемую службу сети доставки контента (CDN), которая называется Amazon CloudFront , В двух словах, CloudFront - это сеть распределенных периферийных серверов, обеспечивающих быстрый доступ к ресурсам за счет кэширования их рядом с пользователем. CloudFront необходим практически для любого общедоступного сайта, работающего на AWS.
Когда ресурс запрашивается с URL-адреса службы, запрос направляется в пограничное местоположение CloudFront. CloudFront отвечает кэшированным объектом, если он присутствует, или передает запрос источнику. Origin - это действующий сервис, работающий в центре обработки данных AWS.
Чтобы CloudFront работал эффективно, он не кэширует запросы на основе заголовка User-Agent.
Это проблематично, поскольку веб-сервер, работающий на источнике, нуждается в заголовке User-Agent для обнаружения ботов и сканеров.
К сожалению, нет идеального решения этой проблемы. Лучшее решение - настроить CloudFront для передачи всех запросов на загрузку страниц в источник с заголовком User-Agent. Заголовок User-Agent по умолчанию не передается, поэтому его необходимо настроить. Это означает, что CloudFront не может кэшировать какие-либо запросы на загрузку страницы, и загрузочный файл index.html всегда возвращается из источника. Хорошей новостью является то, что вы можете и должны иметь все другие ресурсы, кэшированные в CloudFront, чтобы свести к минимуму снижение производительности.
Заключение
Одностраничные приложения JavaScript могут обеспечить отличный пользовательский опыт и быстро заменяют традиционные веб-платформы, отображаемые на стороне сервера. Веб-основы меняются медленно, и только несколько сканеров и ботов могут отображать содержимое JavaScript. Видимость поисковой системы и совместимость с платформами социальных сетей крайне важны для любого общедоступного веб-сайта.
Чтобы SPA был доступен для всех платформ, необходимо выполнить предварительный рендеринг. Предварительный рендеринг устанавливает особые требования к конфигурации инфраструктуры.
Amazon CloudFront - это мощная сеть доставки контента, которую следует использовать практически для всех общедоступных веб-служб в AWS, чтобы гарантировать стабильную производительность во всем мире. Чтобы включить предварительный рендеринг с CloudFront, требуются некоторые специальные конфигурации, пока AWS не предложит что-то более элегантное.
В идеале AWS добавил бы пользовательский заголовок ключа кэша для сканеров и ботов, поскольку они уже реализовали поддержку различных типов устройств:
Старший консультант, Партнер
