SSR и CSR в одном месте: как мы разделили рендеринг для людей и поисковых ботов

В сфере искусственного интеллекта произошло заметное событие. true_engineering 38 минут назад SSR и CSR в одном месте: как мы разделили рендеринг для людей и поисковых ботов 5 мин 1. 8K JavaScript * Angular * В современной веб-разработке SEO и производительность часто вступают в противоречие. SSR дает хорошую индексацию, но усложняет архитектуру.

CSR быстрее в разработке и меньше нагружает сервер, но поисковые боты могут не понять страницу. Мы разрабатываем продуктовый сайт на Angular 17 с микрофронтендовой архитектурой на Module Federation. Нам нужно было и хорошее SEO, и привычный CSR для пользователей.

Технические детали

В итоге мы выбрали гибридный подход: для людей — клиентский рендеринг, для поисковых ботов — пререндеринг через доработанный сервис MTS botview. В статье рассказываем, почему чистый SSR не подошел, как мы разделили рендеринг, что доработали в открытом решении и как отличаем ботов от людей без ошибок. Для начала поясним, что такое SSR и CSR:SSR (Server-Side Rendering) — метод рендеринга веб-страницы на сервере, где сервер отдает уже полностью сформированную HTML-страницу.

CSR (Client-Side Rendering) — метод рендеринга, при котором основной контент формируется непосредственно в браузере, а сервер отдает минимальный HTML-шаблон. Что за проект и какие были требованияСайт написан на Angular 17 с использованием микрофронтендовой архитектуры, которая реализована с помощью Module Federation из пакета @angular-architects. Это продуктовый сайт, поэтому для него важно быть в топе поисковой выдачи — то есть иметь хорошее SEO.

Изначально на сайте был реализован SSR, который позволяет отдавать браузеру практически готовый HTML-файл со структурным содержимым (тексты, ссылки, картинки). Это положительно влияет на SEO. Однако в связи с архитектурными и техническими особенностями не было возможности сделать чистый SSR, который предлагает Angular «из коробки».

Отраслевые последствия

Почему чистый SSR не подошелДля начала нужно понять архитектурные особенности и структуру сайта. У нас есть:SSR;микрофронтенды, реализованные с помощью динамического Module Federation;каждый сервис находится в отдельном репозитории, разворачивается отдельно и подгружается только при непосредственном взаимодействии с ним (например, при переходе на страницу этого сервиса). Основная причина отказа от SSR — обновление версии Angular с 12 до 17.

В версиях 16–17 произошли крупные изменения, некоторые из них коснулись пакета для работы с SSR. Например, @nguniversal перестали поддерживать, а его функциональность перенесли в @angular/ssrБыла попытка перейти на Nx (инструмент для сборки), но в нем не поддерживается Dynamic Module Federation и SSR одновременно. Это вызвало трудности с сохранением архитектуры и способствовало переходу к разделению рендеринга.

Но раз чистый SSR отпал, нужно было искать альтернативу. И тут мы вспомнили про микрофронтенды — они тоже внесли свою лепту в сложность.

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