Платформа усиновлення тварин, яку нарешті може читати пошук

Проблема

PetZone допомагає тваринам знайти дім — але усиновлення відбувається тільки тоді, коли люди можуть знайти оголошення. Додаток був зроблений як client-rendered React SPA: чудово для UX і жахливо для SEO — пошуковики отримували порожню HTML-оболонку, тому сторінки тварин майже не ранжувалися. До того ж аудиторія мультимовна (платформа на 6 мовах), що множить SEO-площу і шанс помилитися.

Як я підійшов

Розділив на дві окремі задачі — надійний бекенд і пошукова видимість поверх SPA — і поставляв шарами:

1. Бекенд .NET у clean architecture — шари Domain, Use Cases, Infrastructure, Contracts і API, окремий нотифікаційний мікросервіс. Доменні та інтеграційні тести — поведінка зафіксована, а не «маємо надію».
2. SEO-лендинги — сторінки за видами (собаки, коти…) та збагачені DTO тварин (назва виду/породи), щоб у кожному оголошенні був реальний індексований контент, а не лише ID.
3. Prerender-pipeline — крок збірки, що рендерить ключові маршрути в статичний HTML і генерує sitemap, щоб краулери отримували повноцінні сторінки, а користувачі — швидкий SPA.

Стек і чому

• Clean architecture у .NET — у домені (тварини, оголошення, волонтери) є реальні правила; ізоляція від інфраструктури тримала їх тестованими, а API — тонким.
• React + Vite SPA з i18next — швидкий app-like UX на 6 локалях без важкого фреймворку.
• Prerender + sitemap замість повного SSR-переписування — отримав SEO-вигоду без викидання робочого SPA і подвоєння складності хостингу. Прагматичне рішення перемогло «правильне».
• In-memory кеш замість Redis — прибрав цілу частину інфраструктури, коли профайл показав, що зовнішній кеш на цьому масштабі не окупає себе.

Результат

• Сторінки тварин і видів тепер читаються сервером усіма підтримуваними мовами — краулери бачать контент, а не порожню оболонку.
• Бекенд покритий тестами на доменному й інтеграційному рівнях — зміни доїжджають у прод упевнено.
• Інфраструктура з часом спростилася (прибрали Redis), а не ускладнилася.

Що було складно

SEO на client-rendered SPA — класична пастка: «правильна» відповідь — повне переписування на SSR, що тут означало б місяці й ризикованіший деплой. Складне було в тому, щоб не піддатися спокусі та натомість зробити prerender-крок, що дає краулерам статичний HTML для кожного маршруту кожною мовою, без розгалуження кодової бази на «SSR-режим» і «SPA-режим». Правильно зробити мультимовні sitemap і canonical URL було копіткою частиною — зробиш не так, і Google бачить шість копій однієї сторінки.