Спрашивали — отвечаем
Реактивные сайты против композитных: что круче
Сибирикс
Реактивные сайты против композитных: что круче
Спрашивали — отвечаем
Реактивные сайты сейчас — настоящий хайп и вершина технологий. Если всё сделать правильно (и использовать серверный рендеринг), то они будут и молниеносно загружаться и нравиться поисковым системам. Клиенты между тем спрашивают: а почему не сделать просто композитный сайт на Битриксе?
У меня ощущение от композитных сайтов, что они какие-то недоделанные. Что это просто маркетинговая фигня от Битрикса. Придумка интересного слова для давно избитой технологии, которую с горем-пополам смогли в нём реализовать. Сильный маркетинг и встроенный инструментарий Битрикса зомбирует, и на него есть хороший спрос. Это сейчас непобедимо — приходится подстраиваться. Хотя я вижу небольшую тенденцию в сторону фреймворков (особенно на нагруженных проектах). Реактивные проекты с бэкэндом на фреймворке выглядят гораздо бодрее, если уметь их готовить.

Владимир
CEO & Founder
Итак, нам поступил вопрос — если клиент выбрал Битрикс, то что лучше: реактивные или композитные сайты. Мол, композитный тоже шустрее обычных, а Реакт и Битрикс такие разные, и для их совместной работы нужна довольно сложная архитектура. Разберёмся, что всё-таки лучше: сайты на React. js или композитные.
React. js — библиотека JavaScript и каркас для веб-приложений, созданный Фейсбуком. Постоянно развивается, имеет развитое сообщество. Ближайший сильный конкурент — Vue. js, тоже очень хорош и оправданно имеет массу поклонников.

SPA — Single-page application это веб-приложение или сайт, которые могут использовать единый HTML-документ как оболочку для всех страниц. Взаимодействие с пользователем происходит через динамически подгружаемые HTML, CSS, JavaScript.

SSR — Server Side Rendering — серверный рендеринг (о нём чуточку ниже).
Композитный сайт
Композитный сайт — технология Битрикса, когда страница разделяется на статическую и динамическую части, где статическая кэшируется и отображается мгновенно, а динамическая подгружается в фоновом режиме.
Как устроен композитный сайт
Плюсы технологии композитных сайтов
  • ускоряет загрузку страниц;
  • улучшает ранжирование в поисковиках (за счет быстрой загрузки сайта);
  • косвенно улучшает конверсию (пользователи любят быстрые сайты).

Ограничения

  • нужен сервер с запасом места на диске, чтобы хранить кэш (на самом деле, хватит 2−3 лишних Гб).

Композитные сайты годятся в случае, если динамического контента мало: на корпоративный сайтах, например.
В интернет-магазинах с композитом будут проблемы: например, на каждый вариант фильтра будет создаваться свой кэш — файлов кэша станет много, и сервер может «лечь». А актуальность этого создаваемого кэша может быть сомнительной — например, если сортировка зависит от остатков товара, файлы кэша будут создаваться заново каждый раз. Другая проблема: обычно у композита в каталоге на товарах стоят «заглушки» — если пользователю понадобится полная информация о товаре, он будет ждать её загрузки так же, как на обычном сайте.

Денис
Разработчик
React.js (SPA+SSR)
Реактивные сайты на React. js (или Vue. js) работают несколько по-другому: вместо отрисовки HTML-страниц, кода бизнес-логики и шаблонов пишется JavaScript. Зачастую при загрузке страницы сначала грузится пустой «контейнер» (HTML), а затем React рендерит в него содержимое страницы. Если какая-то часть страницы меняется — заново подгружаются только данные для этой части страницы (а не вся страница), а обновление и отрисовка нужных частей страницы осуществляется на стороне клиента. Это ускоряет загрузку и рендеринг, делает сайты очень отзывчивыми.

Использование подходов Redux и MobX позволяет динамически менять содержимое страниц в ответ на действия пользователей (поменяли что-то в одном месте — мгновенно изменения отразились на всех связанных местах, без перезагрузки страниц). Это позволяет строить мощные интерфейсы и хорошо работает в личных кабинетах, системах управления, CRM-системах и т. д.

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

Чтобы решить эту проблему, есть серверный рендеринг: весь нужный HTML-код для загрузки страницы по запросу пользователя генерируется на сервере. Сайт отображается мгновенно, и поисковики довольны: видят всё содержимое сразу.
Как работает сайт, написанный на React. js, в связке с серверным рендерингом
Плюсы React (SPA+SSR)
  • контент загружается быстрее (особенно при плохом соединении и на медленных устройствах);
  • улучшает ранжирование в поисковиках (поисковые боты будут видеть полностью отрендеренную страницу);
  • бонусом: готовый REST-Api, на база которого легче впоследствии сделать мобильное приложение.

Ограничения

  • трудоемкое программирование (вместо генерации всей HTML-страницы, на сервере делается Api (как правило, — REST), а вся отрисовка контента организуется на стороне JavaScript);
  • высокий порог входа и дополнительная трудоемкость в поддержке/доработке и добавлении новых функций на проекте (или при редизайне). Вам нужны будут толковые и опытные программисты.
Эти плюсы есть и у других подобных библиотек — например, Vue.js. Здесь, скорее, дело в самом подходе, а не в конкретном инструменте. И да, необязательно пилить весь сайт на React. js — можно реализовать подобным образом только некоторые блоки.

Сергей
Разработчик
По нашему опыту, проект на реактивных фреймворках потребует процентов на 30 больше ресурсов (хотя тут все очень сильно зависит от задачи). Стоит ли в это вкладываться ради отзывчивости интерфейсов?
Реактивные, обычные и композитные сайты: еще раз о разнице
Существует очень много нюансов, которые позволяют реализовать элементы реактивных или композитных сайтов на самых обычных проектах, и четкую грань провести довольно сложно. Все очень сильно зависит от задачи и опыта разработчика (кстати, догматичность разработчика — зачастую плохой симптом). Примерный расклад выглядит так.
Параметры React.js (SPA+SSR) Обычные сайты Композитный сайт
Реакция на действия пользователя как только пользователь что-то поменял в одном месте сайта — изменения сразу же применятся ко всем связанным данным, которые есть на сайте (реактивная парадигма) изменения от пользователей для применения требуют перезагрузку страниц изменения от пользователя, как правило, требуют перезагрузки страниц (и иногда — ожидания создания шаблона)
Наиболее популярная область применения современные проекты, системы управления чем-либо (CRM, бизнесом) админки, личные кабинеты, калькуляторы корпоративный сегмент, блоги, e-commerce корпоративный сегмент, блоги, e-commerce
Контент весь контент виден сразу при загрузке (моментальная загрузка) весь контент виден сразу, но грузится дольше сначала видны заглушки (например, вместо товаров — замыленные прямоугольники), потом подтягивается контент (почти как lazy loading для картинок, только для всего сайта)
Ссылки страницы, ссылки на которые находятся в области видимости, подгружаются фоном ещё до перехода на них (зависит от фреймворка, конечно, и применения PWA) клик на ссылку приводит к перезагрузке страницы при клике на ссылку придется ждать, пока страница загрузится — отклик принципиально дольше
Загрузка страниц все шаблоны страниц загружаются сразу, и из них страницы строятся на стороне JS вся страница заново строится на сервере и отдается на клиент — как правило, целиком (включая те блоки страниц, которые не меняются — меню и т.д.) при переходе между страницами загрузка шаблонов каждой новой страницы занимает время (потому что заново запускается весь цикл)
Кэширование страницы можно кэшировать на клиенте, поэтому повторный заход на страницу происходит моментально, т.к. нет запросов к серверу (актуально для контентных страниц, метрики могут давать небольшую задержку) страницы кэшируются на сервере (можно установить время жизни страницы — в этом случае браузер будет кэшировать статические данные). страницы кэшируются на сервере — это дольше (на сервере, как правило, кэшируется либо результат выборки и подготовки данных, либо уже результирующий HTML).
Загрузка данных то, что уже загружено, повторно можно не запрашивать каждый раз анализируется актуальность кэша каждый раз анализируется кэш на наличие созданных шаблонов
Реактивные сайты сейчас на пике популярности технологий, но решать, конечно, только вам — мы лишь можем детально обсудить ваши задачи и посоветовать лучшее решение для них ;)