Что такое spa или одностраничный портал


Содержание

Одностраничные приложения

В этой и последующих статьях будет описано средство , которое является относительно новым дополнением платформы ASP.NET и позволяет быстро и легко создавать веб-службы, предоставляющие API-интерфейс для HTTP-клиентов.

Средство Web API основано на том же базисе, что и приложения ASP.NET MVC Framework, но не является частью инфраструктуры ASP.NET MVC Framework. Вместо этого в Microsoft взяли набор ключевых классов и связанных с ними характеристик из пространства имен System.Web.Mvc и продублировали его в пространстве имен System.Web.Http.

Идея в том, что Web API — это часть главной платформы ASP.NET и может использоваться в других типах веб-приложений либо в качестве автономного механизма веб-служб. Одним из главных применений средства Web API считается создание путем комбинирования Web API с возможностями ASP.NET MVC Framework. Далее будет показано, что собой представляют SPA-приложения и как они работают.

Упрощение создания веб-служб является неотъемлемой особенностью Web API. Оно представляет собой значительное улучшение по сравнению с другими технологиями построения веб-служб, которые компания Microsoft предлагала на протяжении последнего десятилетия. Мне нравится средство Web API, и вы должны использовать его в своих проектах, не в последнюю очередь потому, что оно отличается простотой и построено на базе того же самого проектного решения, что и ASP.NET MVC Framework.

Термин одностраничное приложение (SPA) применяется довольно широко. Наиболее согласованным является его определение как веб-приложения, начальное содержимое которого доставляется в виде комбинации HTML-разметки и кода JavaScript, а последующие операции выполняются с участием веб-службы REST, доставляющей данные в формате JSON в ответ на запросы Ajax.

Это отличается от того вида приложений, которые строились в примерах ранее, где результатами операций, выполняемых пользователем, были новые HTML-документы, генерируемые в ответ на синхронные HTTP-запросы. Такие приложения будут называться .

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

В большинстве приложений приемы SPA и RTA смешиваются, при этом каждая крупная область функциональности приложения доставляется как SPA, а навигация между областями функциональности управляется с применением стандартных HTTP-запросов, которые создают новый HTML-документ.

Пример одностраничного приложения

Для целей этих статей в Visual Studio создан новый проект MVC по имени WebServices с использованием шаблона Empty (Пустой). В разделе Add folders and core references for (Добавить папки и основные ссылки для) были отмечены флажки MVC и Web API, как показано на рисунке ниже:

Этот проект будет использоваться для создания обычного приложения ASP.NET MVC Framework, после чего с помощью Web API будет создана веб-служба. По готовности веб-службы приложение ASP.NET MVC Framework будет превращено в одностраничное приложение.

Создание модели

Приложение будет создавать и поддерживать набор заявок на бронирование помещений. Приложение планируется сохранять простым, чтобы можно было сосредоточиться на механике описываемого средства, поэтому заявки на бронирование будут состоять только из имени заказчика и местоположения помещения. В папку Models добавлен файл класса по имени Reservation.cs, содержимое которого показано в примере ниже:

Планируется создать простую коллекцию объектов Reservation, хранящуюся в памяти, которая будет действовать в качестве хранилища данных. Нет необходимости заниматься установкой базы данных, однако нужна возможность выполнения операций CRUD над коллекцией объектов модели, что позволит продемонстрировать ряд важных аспектов Web API. В папку Models добавляется также файл класса по имени ReservationRepository.cs:

В реальном проекте пришлось бы позаботиться о разрыве тесной связи между классами и ввести в приложение интерфейсы, а также обеспечить внедрение зависимостей. Однако в этой теме внимание уделяется только Web API и приложениям SPA, так что когда дело дойдет до стандартных приемов, будут предприняты некоторые упрощения.

Класс хранилища имеет начальный список из трех объектов Reservation и определяет методы, которые позволяют просматривать, добавлять, удалять и обновлять коллекцию. Поскольку постоянство в хранилище отсутствует, любые изменения, вносимые в хранилище, теряются в результате останова и перезапуска приложения, но этот пример целиком сосредоточен на способе, которым содержимое может быть доставлено, а не на том, каким образом оно хранится на сервере. Для обеспечения определенной доли постоянства между запросами создается экземпляр класса ReservationRepository, который доступен через статическое свойство Current.

Установка пакетов NuGet

В этой и последующих статьях будут применяться три пакета NuGet: jQuery, Bootstrap и Knockout. Библиотеки jQuery и Bootstrap уже были описаны и использовались ранее. — это библиотека, которую в Microsoft приспособили для одностраничных приложений. Она была создана Стивом Сандерсоном. Несмотря на то что Стив работает в Microsoft, пакет Knockout доступен в виде открытого кода на веб-сайте библиотеки Knockout и получил широкое распространение. Позже будет показано, как функционирует Knockout, а пока нужно установить упомянутые выше пакеты.

Выберите пункт меню Tools Library Package Manager Package Manager Console (Сервис Диспетчер библиотечных пакетов Консоль диспетчера пакетов), чтобы открыть окно командной строки NuGet, и введите следующие команды:

Добавление контроллера

В пример проекта добавляется контроллер по имени Home, определение которого можно видеть в примере:

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

Добавление компоновки и представлений

Чтобы сгенерировать содержимое для приложения, создается папка Views/Shared, в которую добавляется файл представления по имени _Layout.cshtml с содержимым, показанным в примере ниже:

В этой базовой компоновке предусмотрены элементы
для файлов CSS библиотеки Bootstrap. В компоновке определены два раздела, Scripts и Body, которые будут использоваться для вставки содержимого внутрь компоновки. Следующий шаг заключается в создании представления верхнего уровня для приложения. Хотя далее будет создаваться обычное приложение ASP.NET MVC Framework, известно, что в конечном итоге должно быть построено одностраничное приложение.

Трансформацию делать будет проще, если создать единственное представление, которое содержит всю HTML-разметку, требуемую для приложения, даже при условии, что результат первоначально выглядит несколько странно. В папку Views/Home добавляется файл представления по имени Index.cshtml, содержимое которого приведено в примере ниже:

Модель представления для этого представления является перечислением объектов Reservation, и для обеспечения строительных блоков функциональности, которую будет видеть пользователь, создаются два частичных представления. Файл с первым частичным представлением называется Summary.cshtml. Этот файл создан в папке Views/Home:

Модель представления для частичного представления — то же самое перечисление объектов Reservation, и оно используется для генерации стилизованной таблицы с помощью Bootstrap в виде элемента

, который отображает значения свойств этих объектов. Вспомогательный метод Html.ActionLink() применяется для генерации ссылки, которая будет вызывать действие Remove контроллера Home; ссылка стилизована в виде кнопки с использованием Bootstrap.

Еще одно частичное представление называется Editor.cshtml и также находится в папке Views/Home. Содержимое этого файла приведено в примере ниже. Частичное представление содержит форму, которая применяется для создания новых заявок на бронирование. Отправка формы приводит к вызову действия Add контроллера Home.

Установка стартового URL и тестирование приложения

Последний подготовительный шаг связан с установкой местоположения, куда Visual Studio будет переходить при запуске приложения. Выберите пункт WebServices Properties (Свойства WebServices) в меню Project (Проект) среды Visual Studio, в открывшемся диалоговом окне перейдите на вкладку Web и отметьте переключатель Specific Page (Определенная страница) в категории Start Action (Начальное действие). Вводить какое-либо значение не нужно — достаточно только выбора переключателя.

Чтобы протестировать приложение в его классической форме ASP.NET MVC Framework, выберите пункт Start Debugging (Запустить отладку) в меню Debug среды Visual Studio. Вы увидите (немного странную) компоновку в стиле «все в одном», которая предоставляет пользователю список текущих заявок на бронирование вместе с возможностью их создания и удаления:

В следующей статье мы добавим средства Web API для нашего приложения.


htmllab

Кокосовая пальма в океане

Одностраничное приложение и JavaScript-фреймворки

Для построения одностраничных приложений используют различные фреймворки:

  • backbone.js (рус.)- легкий библиотека, написана автором CoffeeScript и используемая для разработки SPA-страниц с поддержкой REST архитектуры
  • ember.js (рус.)- тоже бесплатный JavaScript-фреймворк основанный на модули Модели-Представления-Контроллера (шаблон разработки — MVC )
  • angular.js (рус.) — фреймворк, MVC. Один из авторов продолжается заниматься фреймворком, работая в Google.

Одностраничный сайт html

Можно построить используя работу с селекторами по идентификатору и целевому селектору :target, CSS-свойства для управлением видимостью содержимого (display, visibility и margin). Шаблоны одностраничного сайта включает все необходимое содержимое для работы посетителя. В этом простейшем случае подключать JS-фреймворки обходимости нет.

Псевдокласс :target позволяет выбрать такие HTML-элементы на странице, атрибут >.

Каркас такой страницы может выглядеть так (внимание! Для упрощения используется одинаковая высота у всех страниц. На практике объем содержимого буде разным)

Посмотреть пример работы. Со страницами, использующими JS-фреймворки работа строится другим способом.

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Что такое single page application. Одностраничные веб-приложения (SPA) с библиотекой KnockoutJS

В последнее время в работе специалистов Netpeak Agency много сайтов, использующих AJAX-технологии , а также сайтов написанных на JavaScript фреймворках. Без дополнительной оптимизации они не готовы к продвижению в поисковых системах. Поэтому я детально опишу, что такое SPA-сайты, как они работают, и как можно сделать Single Page Application SEO-Friendly.

Статья будет полезна SEO-специалистам и владельцам сайтов, которые хотят перейти на Single Page Application, но не решаются, потому что SPA могут «поссориться» с поисковыми системами.

Что такое SPA

SPA (Single Page Application ) — одностраничное JavaScript приложение, которое запускается и работает в браузере. В отличии от «традиционного» сайта, архитектура на SPA-сайтах построена так, что рендеринг страницы полностью происходит на стороне клиента, а не на стороне сервера.

В браузере пользователя запускается JavaScript-приложение, а все необходимое содержимое страниц динамически загружается с помощью AJAX. Навигация по сайту происходит без перезагрузки страниц. За счет такой архитектуры, SPA-сайты работают быстрее, чем «традиционные» сайты.

Рассмотрим детальнее, как происходит загрузка и рендеринг содержимого на SPA-сайтах:

  1. Пользователь запрашивает HTML содержимое сайта.
  2. В ответ приходит JavaScript-приложение.
  3. Приложение определяет, на какой странице находится пользователь, и какое содержимое ему нужно отобразить.
  4. С помощью AJAX пользователь получает необходимый контент: CSS, JS, HTML и текстовый контент.
  5. JavaScript-приложение обрабатывает полученные данные и отображает их в браузере.
  6. При навигации по сайту обновляется не вся страница, а только необходимое содержимое.
  • высокая скорость работы;
  • быстрая разработка;
  • создание версий для разных платформ на основе готового кода (desktop и mobile приложения) .
  • JavaScript не обрабатывается большинством поисковых систем;
  • SPA-сайты не работают без включенного JS в браузере;
  • их нельзя анализировать на предмет ошибок популярными программами и инструментами (например, Netpeak Spider).

Популярные JavaScript фреймворки:

Какие поисковые системы индексируют SPA-сайты

На сегодняшний день только поисковый робот Google умеет рендерить содержимое SPA-сайтов, так как использует для рендеринга инструменты на базе Chrome 41. ASK.com использует выдачу Google. Для остальных поисковых систем необходимо наличие контента в коде в формате HTML.

Оптимизация индексации SPA-сайтов

Роботы Google и Yandex могут проиндексировать Single Page Application, если структура сайта соответствует определенным правилам. При этом, для Яндекса необходимо обязательное наличие полной HTML-копии страницы.

Для Google нужно использовать только правильный формат URL. Летом 2020 Google перестанет индексировать HTML-копии страниц , а будет использовать только рендеринг.

(!) Нельзя запрещать индексирование JS и CSS файлов для поисковых роботов Google. Ограничив их индексацию, Google не сможет проиндексировать содержимое SPA-сайтов.

Существует два способа «заставить» поисковых роботов индексировать AJAX-страницы:


  1. Использовать «?_escaped_fragment_=» .
  2. Отдавать роботу HTML-копии определяя его по user-agent .

Использование «?_escaped_fragment_=»

Этот способ подразумевает генерацию HTML-копий страниц (снимков) по отдельному URL с использованием параметра «?_escaped_fragment_» .

Использование URL c «#!»

Если адреса AJAX страниц формируются с помощью «#» (хеш) , значит нужно заменить их на «#!» (хешбенг) . Например, с https://example.com/#url на https://example.com/#!url .

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив в URL «#!», запросит снимок страницы. Он заменит «#!» на «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/?_escaped_fragment_=url .

Примеры адресов c «#!» и HTML-копий страниц:

  • https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page ;
  • https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main ;
  • https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index .

Использование «традиционных» URL

Если на сайте используются «традиционные» URL (https://example.com/url), необходимо указать на всех страницах мета-тег:

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив на странице мета-тег , запросит HTML-копию страницы. Также добавит в URL параметр «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/url?_escaped_fragment_=

Для популярных фреймворков есть готовые решения, которые заменяют «#!» на «традиционные» URL, например, HTML5 mode для Angular .

(!) В HTML-копии документа мета-тег размещать не следует: в этом случае страница не будет проиндексирована.

(!) На страницах HTML-копий canonical должен либо отсутствовать, либо вести сам на себя.

Например, на странице https://example.com/home?_escaped_fragment_= должен быть указан следующий canonical:

Отдавать HTML-копии страницы по основному URL

Этот способ подходит для SPA-сайта с «традиционными» URL. В чем суть: поисковый робот, запрашивая страницу по основному URL, вместо динамической версии получает HTML-копию страницы.

Определить поискового робота можно по User-Agent. К примеру, по списку роботов Яндекса .

Рендеринг HTML-копий

Для того, чтобы поисковые системы смогли проиндексировать содержимое, необходимо реализовать создание HTML-копий страниц.

HTML-копии — это отрендеренные версии страниц SPA-сайта. Например, содержимое исходного кода страницы SPA-сайта выглядит так:

Single Page Application будет рулить в 2020

В нашей первой статье на COSSA речь пойдет о Single Page Application (SPA). Рассмотрим плюсы и минусы современных web-приложений построенных по принципам одностраничного сайта-приложения (SPA)

Если коротко, то в простейшем варианте SPA это web-приложение, компоненты которого загружаются единожды на одной странице, а контент подгружается по необходимости.

SPA напоминают простые нативные приложения, с разницей лишь в том, что исполняются в браузере, а не в собственном процессе операционной системы, это и является ключом к популярности SPA. На вскидку, известная Meduza или Medium, всеми любимый InVision (projects.invisionapp.com) — все это SPA в том или ином виде.

Почему же SPA приложения такие крутые?

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

ТОП-100 лучших SEO-агентств России 2020

Кто лучше всех в России умеет продвигать сайты в поисковых системах – и к кому лучше обратиться за продвижением сайта своей компании?

Ответ – в свежем рейтинге SEO-компаний за 2020 год по версии RUWARD.

Используя респонсив дизайн, “одностраничники” отлично работают на всех устройствах: стационарных, мобильных, любых. Такое комбо-вомбо из респонсив+SPA способно удовлетворить намного большее количество пользователей, нежели обычный адаптивный сайт, не говоря уже о старичках без адаптивного дизайна вообще.

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


Изначально, при первой загрузке, необходимо загрузить чуть больше данных. Это можно принять за явный недостаток, так как, обычно, все приложение собирается в один большой бандл и грузить его нужно весь сразу. Если приложение очень большое, то этот бандл может оказаться чрезмерно громоздким. Однако, этот минус можно полностью нивелировать, используя разбиение большого бандла на модули и “ленивую” (lazy) их подгрузку.

Многие опасаются использовать SPA из-за того, что практически все поисковые роботы и социальные сети на сегодняшний день “не видят” контент таких сайтов (пока в SPA умеет только Google). Используя серверный рендеринг и изоморфное приложение мы полностью избавляемся от этой проблемы. Поисковые системы получают готовые HTML странички со всей мета-информацией и семантической разметкой.

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

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

В качестве фреймворка для SPA мы используем Angular Universal (изоморфное Angular приложение). До выхода Angular Universal из беты, мы успешно использовали SPA на AngularJS и серверный рендеринг прикрученный нами к Ruby on Rails. Говоря о последнем, мы используем его сейчас как бэк-энд для API. В качестве языка программирования SPA мы используем TypeScript. Для сборки бандлов мы используем Webpack и загружаем модули лениво (lazy-подход). Использование Angular Universal позволяет использовать еще одну крутую фишку — AOT компиляция кода. В отличие от JIT-компиляции при стандартном подходе, заранее скомпилированный AOT-код быстрее обрабатывается браузером.

В результате, при запросе какой-то конкретной страницы веб-приложения пользователем, он получает отрендеренную страницу сервером, которая отображается у него сразу же после завершения запроса браузером (как правило 20-30 миллисекунд). После этого начинается загрузка основной части приложения в фоне, но пользователь уже видит страницу в том виде, в котором она будет у него в итоге (без назойливых белых экранов). Благодаря AOT компиляции, после загрузки всех скриптов приложения, страница быстро перерисовывается уже самим браузером. Пример использования SPA на реальных проектах:

Максимально упрощенная схема нашей реализации SPA в рамках экосистемы “сферического проекта в вакууме” выглядит так:

Детальных плюсов огромное количество. Если Google за 2020 год все свои основные ресурсы перевёл на SPA, то стоит задуматься. Как говориться “Сопливых вовремя целуют”.

Что такое SPA в веб-разработке.

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

Описание

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

SPA(single page application) – это веб-приложение, работающее на одной странице. Оно подгружает все необходимые javascript и css файлы при первой загрузке страницы, а затем все общение между клиентом и сервером сводится к минимуму. Т.е. при таком подходе большая часть работы сайта производится на стороне клиента, а если нужно получить данные с сервера, то это обычно делается с помощью JSON.

Такой способ создания сайтов появился относительно недавно, с приходом HTML5, но уже активно набирает обороты. В принципе, здесь нет ничего удивительного, ведь такое веб-приложение будет работать намного быстрее обычных сайтов, да и разработка не займет много времени. Благо, что сейчас уже есть куча фреймворков, которые позволяют создавать очень сложные сайты такого типа достаточно просто и быстро. На данный момент лучшим фреймворком считается React. У него больше плюсов, чем у конкурентов, а также он прост в изучении и использовании. Если вы хотите побольше узнать о том, как им пользоваться, советую заглянуть сюда. А мы пока перейдем к плюсам SPA.

Плюсы SPA

  • Поддержка большого количества устройств. В отличие от стандартного подхода, SPA приложения работают как на станционарных компьютерах, так и на мобильных устройствах одинаково хорошо. Таким образом, вы можете создать одно приложение и быть уверены, что оно не будет тормозить и будет прекрасно работать даже на не очень мощных устройствах
  • Мощный UX. В приложениях, основанных на таком подходе, намного проще хранить различную информацию, управлять представлением сайта, анимациями. Также, поскольку рабочая страница всего одна, написать красивый пользовательский интерфейс не составит труда
  • Высокая производительность. В обычных сайтах очень часто можно встретить загрузку одного и того же содержимого. Например, шапка сайта, футер, меню и другие элементы, которые не меняются от страницы к странице, тем не менее, каждый раз загружаются с сервера. С использованием SPA подхода такой проблемы просто не будет, т.к. контент будет подгружаться по мере необходимости, что значительно повысит скорость работы приложения

Минусов же у SPA почти нет. Единственное, что стоит отметить, что разработку таких приложений стоит вести достаточно аккуратно. Все дело в том, что если будут утечки памяти, например, то приложение может начать работать намного медленнее, чем нам бы хотелось. Но все это уже зависит от разработчика, от его умений, поэтому, если вы хотите делать приложения качественно, то советую обратить внимание на видеокурс «React JS, Redux, ES2015 с Нуля до Гуру». Он был составлен профессионалом специально для того, чтобы вы тоже научились делать мощные и быстрые приложения, и количество действительно качественных сайтов в интернете стало больше.

Заключение

Итак, сегодня мы рассмотрели, что такое SPA(single page application), в чем его преимущества и недостатки.

Разработка SPA — одностраничных приложений

Быстрая и плавная загрузка полномасштабных приложений на одной странице

Одностраничное приложение (SPA, или single page application) представляет собой веб-сайт или приложение, размещенное на одной веб-странице. Для SPA характерен более гибкий и удобный пользовательский интерфейс, сходный с интерфейсом десктопного приложения. Кроме того, одностраничное приложение имеет более высокую производительность.

SPA обеспечивает более естественный и контролируемый опыт взаимодействия (UX), скрывая сложные переходы (запросы, отклики и пр.).

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

Существуют два вида SPA приложений: приложение, которое встраивает контент нескольких страниц в одну страницу-оболочку, и приложение, которое использует Ajax-загрузку контента, когда пользователь кликает по ссылке. Таким образом, на странице обновляется только та часть контента, которая изменяется, а остальная часть страницы остается без изменений и перезагрузок.

Как сделать SPA-сайты SEO-Friendly?

В последнее время в работе специалистов Netpeak Agency много сайтов, использующих AJAX-технологии , а также сайтов написанных на JavaScript фреймворках. Без дополнительной оптимизации они не готовы к продвижению в поисковых системах. Поэтому я детально опишу, что такое SPA-сайты, как они работают, и как можно сделать Single Page Application SEO-Friendly.

Статья будет полезна SEO-специалистам и владельцам сайтов, которые хотят перейти на Single Page Application, но не решаются, потому что SPA могут «поссориться» с поисковыми системами.

Что такое SPA

SPA (Single Page Application) — одностраничное JavaScript приложение, которое запускается и работает в браузере. В отличии от «традиционного» сайта, архитектура на SPA-сайтах построена так, что рендеринг страницы полностью происходит на стороне клиента, а не на стороне сервера.

В браузере пользователя запускается JavaScript-приложение, а все необходимое содержимое страниц динамически загружается с помощью AJAX. Навигация по сайту происходит без перезагрузки страниц. За счет такой архитектуры, SPA-сайты работают быстрее, чем «традиционные» сайты.


Рассмотрим детальнее, как происходит загрузка и рендеринг содержимого на SPA-сайтах:

  1. Пользователь запрашивает HTML содержимое сайта.
  2. В ответ приходит JavaScript-приложение.
  3. Приложение определяет, на какой странице находится пользователь, и какое содержимое ему нужно отобразить.
  4. С помощью AJAX пользователь получает необходимый контент: CSS, JS, HTML и текстовый контент.
  5. JavaScript-приложение обрабатывает полученные данные и отображает их в браузере.
  6. При навигации по сайту обновляется не вся страница, а только необходимое содержимое.
  • высокая скорость работы;
  • быстрая разработка;
  • создание версий для разных платформ на основе готового кода (desktop и mobile приложения).
  • JavaScript не обрабатывается большинством поисковых систем;
  • SPA-сайты не работают без включенного JS в браузере;
  • их нельзя анализировать на предмет ошибок популярными программами и инструментами (например, Netpeak Spider).

Популярные JavaScript фреймворки:

Какие поисковые системы индексируют SPA-сайты

На сегодняшний день только поисковый робот Google умеет рендерить содержимое SPA-сайтов, так как использует для рендеринга инструменты на базе Chrome 41. ASK.com использует выдачу Google. Для остальных поисковых систем необходимо наличие контента в коде в формате HTML.

Оптимизация индексации SPA-сайтов

Роботы Google и Yandex могут проиндексировать Single Page Application, если структура сайта соответствует определенным правилам. При этом, для Яндекса необходимо обязательное наличие полной HTML-копии страницы.

Для Google нужно использовать только правильный формат URL. Летом 2020 Google перестанет индексировать HTML-копии страниц, а будет использовать только рендеринг.

Существует два способа «заставить» поисковых роботов индексировать AJAX-страницы:

  1. Использовать «?_escaped_fragment_=».
  2. Отдавать роботу HTML-копии определяя его по user-agent.

Использование «?_escaped_fragment_=»

Этот способ подразумевает генерацию HTML-копий страниц (снимков) по отдельному URL с использованием параметра «?_escaped_fragment_».

Использование URL c «#!»

Если адреса AJAX страниц формируются с помощью «#» (хеш), значит нужно заменить их на «#!» (хешбенг). Например, с https://example.com/#url на https://example.com/#!url.

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив в URL «#!», запросит снимок страницы. Он заменит «#!» на «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/?_escaped_fragment_=url.

Примеры адресов c «#!» и HTML-копий страниц:

  • https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page;
  • https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main;
  • https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index.

Использование «традиционных» URL

Если на сайте используются «традиционные» URL (https://example.com/url), необходимо указать на всех страницах мета-тег:

Google просканирует содержимое по основному URL, а робот Яндекса, обнаружив на странице мета-тег , запросит HTML-копию страницы. Также добавит в URL параметр «?_escaped_fragment_=» и просканирует ее по адресу https://example.com/url?_escaped_fragment_=

Для популярных фреймворков есть готовые решения, которые заменяют «#!» на «традиционные» URL, например, HTML5 mode для Angular.

(!) В HTML-копии документа мета-тег размещать не следует: в этом случае страница не будет проиндексирована.

(!) На страницах HTML-копий canonical должен либо отсутствовать, либо вести сам на себя.

Например, на странице https://example.com/home?_escaped_fragment_= должен быть указан следующий canonical:

Отдавать HTML-копии страницы по основному URL

Этот способ подходит для SPA-сайта с «традиционными» URL. В чем суть: поисковый робот, запрашивая страницу по основному URL, вместо динамической версии получает HTML-копию страницы.

Определить поискового робота можно по User-Agent. К примеру, по списку роботов Яндекса.


Рендеринг HTML-копий

Для того, чтобы поисковые системы смогли проиндексировать содержимое, необходимо реализовать создание HTML-копий страниц.

HTML-копии — это отрендеренные версии страниц SPA-сайта. Например, содержимое исходного кода страницы SPA-сайта выглядит так:

А вот отрендеренная HTML-копия этой страницы:


Для создания HTML-копий страниц можно:

  1. Использовать рендеринг на своих серверах.
  2. Использовать рендеринг на аутсорсе.
  3. Использовать изоморфный JavaScript.

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

Рендеринг на своих серверах

Подходит для крупных проектов. Для рендеринга HTML-копий на своих серверах можно использовать следующие инструменты:

Рендеринг на аутсорсе

Подходит для небольших проектов. Для рендеринга HTML-копий на сторонних серверах можно использовать такие инструменты:

Изоморфный JavaScript

Изоморфный JavaScript позволяет выполнять рендеринг страницы как на сервере, так и в браузере пользователя. Таким образом, при первой загрузке страницы пользователь получает обычную HTML-страницу и JavaScript-приложение. Дальнейшая навигация по сайту для пользователя будет динамической, в то время как поисковые системы каждый раз будут получать HTML-версию страницы.

Такой подход к разработке сайта позволяет убить сразу двух зайцев: сайт получает все преимущества SPA-сайта и возможность продвижения в поисковых системах без дополнительных внедрений.

Обработка 404 страниц

Рендеринг страницы на SPA-сайтах происходит на стороне клиента, поэтому без дополнительных доработок код ответа несуществующей страницы будет 200 ОК.

SPA-сайты должны корректно обрабатывать несуществующие страницы и отдавать в качестве заголовка страницы 404 ошибку.

Настройка Google Analytics

Стандартный код Universal Analytics выполняется при загрузке каждой новой страницы, а SPA-сайты подгружают контент динамически, «имитируя» переход между страницами. Для того, чтобы Google Analytics корректно обрабатывал переходы на страницах, необходимо сделать так, чтобы счетчик Universal Analytics активировался каждый раз, когда на сайте меняется URL.

Настроить Google Analytics для SPA-сайтов можно, используя Tag Manager и триггер «History» или — передавая данные вручную.

С помощью Tag Manager и триггера «History»

Использование HTML5 History API на SPA-сайтах позволяет настроить корректную работу счетчика Google Analytics в GTM с помощью триггера «History». Каждый раз при обновлении истории (смены URL, Title), тег Google Analytics будет активироваться повторно.

Для этого необходимо в настройках тега в качестве триггера указать дополнительный триггер:

Передача данных вручную

Каждый раз, когда в строке браузера меняется URL, необходимо передавать об этом информацию в Google Analytics.

Чтобы обновить счетчик, нужно использовать команду «set» и указывать новое значение переменной «page»:

Теперь все последующие обращения будут привязаны к новому URL. Чтобы передать информацию о просмотре страницы, нужно использовать команду «send» и указывать значение «pageview» сразу после обновления счетчика:

Выводы

SPA-сайты — это настоящее и будущее, поэтому не нужно бояться брать в работу такие проекты. Single Page Application можно «подружить» с поисковыми системами. Чтобы ваш SPA-сайт был дружелюбен как к SEO, так и к пользователям я рекомендую:

  1. Использовать «традиционные» URL.
  2. Использовать изоморфные приложения или рендеринг HTML-копий.
  3. Настроить правильную отдачу заголовка «404 Not Found».
  4. Настроить корректную работу Google Analytics.

Как настроить веб-аналитику одностраничных приложений (SPA)

Одностраничное приложение (Single-Page Application) — это когда веб-приложение создано так, что все взаимодействие с сайтом происходит на одной HTML-странице, а необходимые данные подгружаются динамически при помощи AJAX-запросов на сервер.


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

Одностраничные приложения удобны по нескольким причинам:

  • Загрузив страницу единожды, браузер затем будет запрашивать не каждый раз новую страницу с повторяющимися элементами и блоками, а только необходимые данные. Таким образом SPA-сайт будет разгружать ресурсы сервера.
  • Пользователь, перемещаясь по «страницам» , будет ждать гораздо меньше времени по сравнению с полной перезагрузкой страницы.
Алина Глазырина

главный редактор блога Inweb

Подпишитесь и будьте в курсе!

Алина пишет о главных новостях интернет-маркетинга

В чем проблема?

Из-за специфического принципа работы SPA код Google Analytics или Google Tag Manager сработает лишь единожды, если только пользователь самостоятельно не перезагрузит страницу в браузере. Несмотря на то, что пользователи могут (и будут) совершать несколько переходов по разделам, стандартными методами Google Analytics этого отследить не может. При этом в первую очередь страдают такие метрики:

  • Количество страниц на сеанс;
  • Показатель отказов;
  • Длительность сеанса.

Как исправить отслеживание страниц в SPA?

Для перехода на новую страницу без перезагрузки одностраничные приложения используют HTML5 History API — набор методов JavaScript, при помощи которых можно манипулировать содержимым истории текущей вкладки — перемещаться вперед и назад, а также пополнять стек истории.

Если вы пользуетесь стандартной реализацией кода отслеживания Universal Analytics, рекомендации по отслеживанию одностраничных приложений можно почитать на странице справки Google. В общем случае разработчику веб-приложения необходимо добавить в блок(и) кода, который выполняет перемещение по истории, следующие строчки:

htmllab

Кокосовая пальма в океане

Одностраничное приложение и JavaScript-фреймворки

Для построения одностраничных приложений используют различные фреймворки:

  • backbone.js (рус.)- легкий библиотека, написана автором CoffeeScript и используемая для разработки SPA-страниц с поддержкой REST архитектуры
  • ember.js (рус.)- тоже бесплатный JavaScript-фреймворк основанный на модули Модели-Представления-Контроллера (шаблон разработки — MVC )
  • angular.js (рус.) — фреймворк, MVC. Один из авторов продолжается заниматься фреймворком, работая в Google.

Одностраничный сайт html

Можно построить используя работу с селекторами по идентификатору и целевому селектору :target, CSS-свойства для управлением видимостью содержимого (display, visibility и margin). Шаблоны одностраничного сайта включает все необходимое содержимое для работы посетителя. В этом простейшем случае подключать JS-фреймворки обходимости нет.

Псевдокласс :target позволяет выбрать такие HTML-элементы на странице, атрибут >.

Каркас такой страницы может выглядеть так (внимание! Для упрощения используется одинаковая высота у всех страниц. На практике объем содержимого буде разным)

Посмотреть пример работы. Со страницами, использующими JS-фреймворки работа строится другим способом.

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Сайт без перезагрузки страниц на Ajax — плюсы и минусы одностраничных приложений SPA

Классические сайты и веб-приложения состоят из нескольких страниц, каждая из которых имеет свой адрес. Так было долгое время, пока не начали появляться проекты без перезагрузки страниц. Такие ресурсы называются одностраничными приложениями — single page application (SPA). Одностраничные приложения имеют свои плюсы и минусы.

Концепция SPA подразумевает, что сайт имеет всего лишь одну страницу (в некоторых случаях несколько), весь контент грузится динамически, а адреса страниц в браузере подставляются скриптами – происходит эмуляция смены адреса страницы. Для сохранения возможности навигации по страницам используется специальное API – например, History API или новые возможности HTML5. Такие проекты в настоящее время набирают всю большую популярность.

Стоит ли делать сайт без перезагрузки страниц, только на Ajax? У каждой технологии, особенно новой, есть свои достоинства и недостатки. Рассмотрим плюсы и минусы создания сайтов без перезагрузки страницы.

Сначала о хорошем, преимущества сайтов без перезагрузки страниц следующие:

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

Теперь рассмотрим недостатки сайтов без перезагрузки страниц:

  • проблемы с индексацией контента поисковиками и с SEO-продвижением – хотя поисковики и адаптируются к новым технологиям, но проблемы все еще актуальны. Необходимо использовать специальные средства для отдачи контента поисковикам, что может быть расценено как клоакинг;
  • невозможность работы без JavaScript – сайт потеряет часть посетителей;
  • увеличенная нагрузка на браузер вследствие интенсивного использования JavaScript и Ajax;
  • сложность отладки и выявления ошибок;
  • отсутствие настоящих адресов, которые можно добавлять в закладки и по которым можно ссылаться на понравившийся контент. Или необходимость их эмуляции – подстановки скриптом в строку адреса;
  • подвисания интерфейса и пустые блоки в случае ошибки загрузки;
  • сложности ведения статистики сайта.

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

Илон Маск рекомендует:  Big (большой) большой шрифт (нет в html 2 0)
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL