Реактивные сайты против композитных: что круче
Спрашивали — отвечаем
Реактивные сайты сейчас — настоящий хайп и вершина технологий. Если всё сделать правильно (и использовать серверный рендеринг), то они будут и молниеносно загружаться и нравиться поисковым системам. Клиенты между тем спрашивают: а почему не сделать просто композитный сайт на Битриксе?
У меня ощущение от композитных сайтов, что они какие-то недоделанные. Что это просто маркетинговая фигня от Битрикса. Придумка интересного слова для давно избитой технологии, которую с горем-пополам смогли в нём реализовать. Сильный маркетинг и встроенный инструментарий Битрикса зомбирует, и на него есть хороший спрос. Это сейчас непобедимо — приходится подстраиваться. Хотя я вижу небольшую тенденцию в сторону фреймворков (особенно на нагруженных проектах). Реактивные проекты с бэкэндом на фреймворке выглядят гораздо бодрее, если уметь их готовить.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1582878883/tild3363-3265-4134-b033-623163353639__-__empty__vova_round.png)
Владимир
CEO & Founder
Итак, нам поступил вопрос — если клиент выбрал Битрикс, то что лучше: реактивные или композитные сайты. Мол, композитный тоже шустрее обычных, а Реакт и Битрикс такие разные, и для их совместной работы нужна довольно сложная архитектура. Разберёмся, что всё-таки лучше: сайты на React. js или композитные.
React. js — библиотека JavaScript и каркас для веб-приложений, созданный Фейсбуком. Постоянно развивается, имеет развитое сообщество. Ближайший сильный конкурент — Vue. js, тоже очень хорош и оправданно имеет массу поклонников.
SPA — Single-page application это веб-приложение или сайт, которые могут использовать единый HTML-документ как оболочку для всех страниц. Взаимодействие с пользователем происходит через динамически подгружаемые HTML, CSS, JavaScript.
SSR — Server Side Rendering — серверный рендеринг (о нём чуточку ниже).
SPA — Single-page application это веб-приложение или сайт, которые могут использовать единый HTML-документ как оболочку для всех страниц. Взаимодействие с пользователем происходит через динамически подгружаемые HTML, CSS, JavaScript.
SSR — Server Side Rendering — серверный рендеринг (о нём чуточку ниже).
Композитный сайт
Композитный сайт — технология Битрикса, когда страница разделяется на статическую и динамическую части, где статическая кэшируется и отображается мгновенно, а динамическая подгружается в фоновом режиме.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1582878883/tild3833-3836-4836-a436-323538663435__-__empty__1.png)
Как устроен композитный сайт
Плюсы технологии композитных сайтов
Ограничения
Композитные сайты годятся в случае, если динамического контента мало: на корпоративный сайтах, например.
- ускоряет загрузку страниц;
- улучшает ранжирование в поисковиках (за счет быстрой загрузки сайта);
- косвенно улучшает конверсию (пользователи любят быстрые сайты).
Ограничения
- нужен сервер с запасом места на диске, чтобы хранить кэш (на самом деле, хватит 2−3 лишних Гб).
Композитные сайты годятся в случае, если динамического контента мало: на корпоративный сайтах, например.
В интернет-магазинах с композитом будут проблемы: например, на каждый вариант фильтра будет создаваться свой кэш — файлов кэша станет много, и сервер может «лечь». А актуальность этого создаваемого кэша может быть сомнительной — например, если сортировка зависит от остатков товара, файлы кэша будут создаваться заново каждый раз. Другая проблема: обычно у композита в каталоге на товарах стоят «заглушки» — если пользователю понадобится полная информация о товаре, он будет ждать её загрузки так же, как на обычном сайте.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1582878883/tild6661-3337-4638-a231-363435323637__-__empty__den-vinokurov.jpg)
Денис
Разработчик
React.js (SPA+SSR)
Реактивные сайты на React. js (или Vue. js) работают несколько по-другому: вместо отрисовки HTML-страниц, кода бизнес-логики и шаблонов пишется JavaScript. Зачастую при загрузке страницы сначала грузится пустой «контейнер» (HTML), а затем React рендерит в него содержимое страницы. Если какая-то часть страницы меняется — заново подгружаются только данные для этой части страницы (а не вся страница), а обновление и отрисовка нужных частей страницы осуществляется на стороне клиента. Это ускоряет загрузку и рендеринг, делает сайты очень отзывчивыми.
Использование подходов Redux и MobX позволяет динамически менять содержимое страниц в ответ на действия пользователей (поменяли что-то в одном месте — мгновенно изменения отразились на всех связанных местах, без перезагрузки страниц). Это позволяет строить мощные интерфейсы и хорошо работает в личных кабинетах, системах управления, CRM-системах и т. д.
Использование технологий PWA позволяет также кэшировать данные на стороне клиента, и не обращаться к ним на сервер при повторной необходимости. Но появляется проблема: для поисковиков страницы сайта кажутся пустыми (они видят только каркас страницы) — так в топ выдачи не попасть.
Чтобы решить эту проблему, есть серверный рендеринг: весь нужный HTML-код для загрузки страницы по запросу пользователя генерируется на сервере. Сайт отображается мгновенно, и поисковики довольны: видят всё содержимое сразу.
Использование подходов Redux и MobX позволяет динамически менять содержимое страниц в ответ на действия пользователей (поменяли что-то в одном месте — мгновенно изменения отразились на всех связанных местах, без перезагрузки страниц). Это позволяет строить мощные интерфейсы и хорошо работает в личных кабинетах, системах управления, CRM-системах и т. д.
Использование технологий PWA позволяет также кэшировать данные на стороне клиента, и не обращаться к ним на сервер при повторной необходимости. Но появляется проблема: для поисковиков страницы сайта кажутся пустыми (они видят только каркас страницы) — так в топ выдачи не попасть.
Чтобы решить эту проблему, есть серверный рендеринг: весь нужный HTML-код для загрузки страницы по запросу пользователя генерируется на сервере. Сайт отображается мгновенно, и поисковики довольны: видят всё содержимое сразу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1582878883/tild3932-3563-4364-b433-306264316463__-__empty__photo.png)
Как работает сайт, написанный на React. js, в связке с серверным рендерингом
Плюсы React (SPA+SSR)
Ограничения
- контент загружается быстрее (особенно при плохом соединении и на медленных устройствах);
- улучшает ранжирование в поисковиках (поисковые боты будут видеть полностью отрендеренную страницу);
- бонусом: готовый REST-Api, на база которого легче впоследствии сделать мобильное приложение.
Ограничения
- трудоемкое программирование (вместо генерации всей HTML-страницы, на сервере делается Api (как правило, — REST), а вся отрисовка контента организуется на стороне JavaScript);
- высокий порог входа и дополнительная трудоемкость в поддержке/доработке и добавлении новых функций на проекте (или при редизайне). Вам нужны будут толковые и опытные программисты.
Эти плюсы есть и у других подобных библиотек — например, Vue.js. Здесь, скорее, дело в самом подходе, а не в конкретном инструменте. И да, необязательно пилить весь сайт на React. js — можно реализовать подобным образом только некоторые блоки.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1582878883/tild6165-3862-4466-a336-323234353530__-__empty__garbuz.png)
Сергей
Разработчик
По нашему опыту, проект на реактивных фреймворках потребует процентов на 30 больше ресурсов (хотя тут все очень сильно зависит от задачи). Стоит ли в это вкладываться ради отзывчивости интерфейсов?
Реактивные, обычные и композитные сайты: еще раз о разнице
Существует очень много нюансов, которые позволяют реализовать элементы реактивных или композитных сайтов на самых обычных проектах, и четкую грань провести довольно сложно. Все очень сильно зависит от задачи и опыта разработчика (кстати, догматичность разработчика — зачастую плохой симптом). Примерный расклад выглядит так.
Параметры | React.js (SPA+SSR) | Обычные сайты | Композитный сайт |
---|---|---|---|
Реакция на действия пользователя | как только пользователь что-то поменял в одном месте сайта — изменения сразу же применятся ко всем связанным данным, которые есть на сайте (реактивная парадигма) | изменения от пользователей для применения требуют перезагрузку страниц | изменения от пользователя, как правило, требуют перезагрузки страниц (и иногда — ожидания создания шаблона) |
Наиболее популярная область применения | современные проекты, системы управления чем-либо (CRM, бизнесом) админки, личные кабинеты, калькуляторы | корпоративный сегмент, блоги, e-commerce | корпоративный сегмент, блоги, e-commerce |
Контент | весь контент виден сразу при загрузке (моментальная загрузка) | весь контент виден сразу, но грузится дольше | сначала видны заглушки (например, вместо товаров — замыленные прямоугольники), потом подтягивается контент (почти как lazy loading для картинок, только для всего сайта) |
Ссылки | страницы, ссылки на которые находятся в области видимости, подгружаются фоном ещё до перехода на них (зависит от фреймворка, конечно, и применения PWA) | клик на ссылку приводит к перезагрузке страницы | при клике на ссылку придется ждать, пока страница загрузится — отклик принципиально дольше |
Загрузка страниц | все шаблоны страниц загружаются сразу, и из них страницы строятся на стороне JS | вся страница заново строится на сервере и отдается на клиент — как правило, целиком (включая те блоки страниц, которые не меняются — меню и т.д.) | при переходе между страницами загрузка шаблонов каждой новой страницы занимает время (потому что заново запускается весь цикл) |
Кэширование | страницы можно кэшировать на клиенте, поэтому повторный заход на страницу происходит моментально, т.к. нет запросов к серверу (актуально для контентных страниц, метрики могут давать небольшую задержку) | страницы кэшируются на сервере (можно установить время жизни страницы — в этом случае браузер будет кэшировать статические данные). | страницы кэшируются на сервере — это дольше (на сервере, как правило, кэшируется либо результат выборки и подготовки данных, либо уже результирующий HTML). |
Загрузка данных | то, что уже загружено, повторно можно не запрашивать | каждый раз анализируется актуальность кэша | каждый раз анализируется кэш на наличие созданных шаблонов |
Реактивные сайты сейчас на пике популярности технологий, но решать, конечно, только вам — мы лишь можем детально обсудить ваши задачи и посоветовать лучшее решение для них ;)