Как сделать публичные страницы мультитенантного SaaS на Next.js дружелюбными к поисковикам

Публичные страницы мультитенантного SaaS-приложения на Next.js часто скрыты от поисковиков из-за динамического рендеринга. Разбираем, как настроить SSR, метаданные и карту сайта, чтобы каждая страница арендатора индексировалась в Google.

Разработчики мультитенантных SaaS-приложений на Next.js часто сталкиваются с проблемой: публичные страницы, которые должны привлекать трафик из поиска, не индексируются поисковиками. Причина — в том, что по умолчанию Next.js использует клиентский рендеринг для динамических маршрутов, а это скрывает контент от краулеров. В этой статье разберем, как сделать публичные страницы мультитенантного приложения поиск-дружелюбными: настроим серверный рендеринг, метаданные и генерацию карты сайта.

Как настроить серверный рендеринг для публичных страниц

Главный шаг — использовать серверный рендеринг (SSR) или статическую генерацию (SSG) для страниц, которые должны индексироваться. В Next.js это достигается с помощью функции generateStaticParams, которая предварительно генерирует HTML для каждого арендатора. Например, если у вас есть страница /tenant/about, вы можете перечислить всех активных арендаторов в этой функции, и Next.js создаст статические версии страниц при сборке.

Однако для больших SaaS с тысячами арендаторов полная статическая генерация может быть нецелесообразной. Тогда используйте серверный рендеринг с export const dynamic = 'force-dynamic' или getServerSideProps в страницах. Это гарантирует, что HTML будет отдаваться на каждом запросе, и краулер увидит полный контент. Важно убедиться, что данные для страницы загружаются на сервере, а не на клиенте, иначе поисковый робот увидит пустую оболочку.

Метаданные и Open Graph для каждого арендатора

Поисковая оптимизация начинается с метаданных. В Next.js 13+ вы можете экспортировать функцию generateMetadata, которая возвращает объект с title, description и другими полями. Для мультитенантного приложения эта функция должна учитывать поддомен или путь арендатора и генерировать уникальные метаданные для каждой страницы. Например, для страницы /acme/about заголовок может быть «О компании Acme | SaaS», а описание — «Узнайте больше о Acme, лидере в области...».

Также не забывайте про Open Graph и Twitter Card: они нужны для красивых превью при шеринге в соцсетях. Убедитесь, что og:image указывает на уникальное изображение арендатора, если оно есть. Это улучшает кликабельность и косвенно влияет на SEO.

Карта сайта для мультитенантного приложения

Карта сайта (sitemap.xml) — критически важный файл для индексации. В Next.js вы можете создать динамический sitemap с помощью app/sitemap.ts. В этом файле перечислите все публичные URL всех арендаторов. Для этого вам понадобится список арендаторов из базы данных. Важно обновлять карту сайта при добавлении новых арендаторов или изменении страниц.

Также добавьте ссылку на sitemap в robots.txt, чтобы поисковики знали о его существовании. В Next.js это делается через app/robots.ts. Убедитесь, что в robots.txt разрешена индексация публичных страниц и запрещены внутренние (например, /dashboard).

Предыстория и контекст

Проблема поисковой оптимизации в мультитенантных приложениях возникла с ростом популярности SaaS-модели. Компании создают поддомены или пути для каждого клиента, и часто по умолчанию эти страницы рендерятся на клиенте. Это приводит к тому, что Google видит пустую страницу и не индексирует её. В 2020-х годах поисковые системы стали лучше обрабатывать JavaScript, но всё ещё не идеально. Поэтому лучшая практика — отдавать готовый HTML с сервера.

Next.js предоставляет гибкие инструменты для этого, но разработчики часто не используют их правильно, особенно в мультитенантной архитектуре. Ключевая сложность — масштабирование: как сгенерировать метаданные и карту сайта для тысяч арендаторов без потери производительности. Решения включают кэширование, инкрементальную статическую регенерацию (ISR) и использование CDN.

Чем это отличается от обычного Next.js-приложения?

В обычном приложении у вас один набор страниц и один sitemap. В мультитенантном — каждый арендатор имеет свой набор страниц, часто с одинаковыми шаблонами, но разным контентом. Поэтому нужно динамически генерировать и метаданные, и карту сайта. Также важно управлять каноническими URL, чтобы избежать дублирования контента: для каждого арендатора должен быть свой канонический URL, например, https://acme.example.com или https://example.com/acme.

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

Рассмотрим практический пример. Допустим, у вас есть страница /public/[tenant]/about. В файле app/public/[tenant]/about/page.tsx вы экспортируете generateStaticParams, которая возвращает массив с tenant для всех активных арендаторов. Если арендаторов слишком много, можно использовать ISR с revalidate = 3600, чтобы страницы обновлялись раз в час.

Для метаданных в том же файле экспортируйте generateMetadata, которая принимает params и возвращает объект с title и description, полученными из базы данных. Важно использовать await для получения данных, так как функция асинхронная.

Для sitemap создайте файл app/sitemap.ts и в нем сформируйте массив URL для всех арендаторов. Здесь можно использовать ту же функцию получения списка арендаторов, но с кэшированием, чтобы не нагружать базу при каждом запросе.

Кого затронет и как

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

Для бизнеса это означает потерю органического трафика и потенциальных лидов. Для разработчиков — необходимость внедрять сложные решения, описанные выше. В России и СНГ многие SaaS-продукты также сталкиваются с этой проблемой, особенно с учётом особенностей поисковой выдачи Яндекса, который также требует полноценного HTML.

Что будет дальше

В будущем Next.js продолжит развиваться, и, возможно, появятся более простые встроенные решения для мультитенантных приложений. Уже сейчас есть экспериментальные функции, такие как generateMetadata с кэшированием, которые упрощают задачу. Рекомендуется следить за обновлениями Next.js и внедрять новые возможности, чтобы поддерживать высокую производительность и SEO.

Также стоит ожидать, что поисковые системы будут лучше обрабатывать JavaScript, но полагаться на это не стоит — лучшая практика remains серверный рендеринг. Поэтому инвестиции в правильную архитектуру сейчас окупятся в долгосрочной перспективе.

Итог

Чтобы публичные страницы мультитенантного SaaS-приложения на Next.js были дружелюбными к поисковикам, необходимо использовать серверный рендеринг или статическую генерацию, настраивать уникальные метаданные для каждого арендатора и генерировать динамическую карту сайта. Это обеспечит индексацию всех страниц и привлечение органического трафика. Следуйте этим рекомендациям, и ваш продукт станет более конкурентоспособным.