Программная фабрика SEO‑маршрутов
Для генерации более чем сотни страниц с различными утилитами (конвертеры, форматтеры, тестеры регэкспов) вместо написания отдельного компонента под каждый инструмент использовалась централизованная фабрика маршрутов. Структура файлов app/[locale]/[slug]/page.tsx стала точкой входа, где locale покрывает поддерживаемые языки (английский и французский), а slug – уникальный идентификатор утилиты.
Ключевым элементом является типизированная карта (TypeScript), описывающая все комбинации целевых языков, форматов и паттернов. На этапе сборки функция generateStaticParams перебирает эту карту, формируя перечень всех возможных пар (locale, slug). Далее Next.js автоматически предсоздаёт HTML‑страницы для каждой комбинации, используя Static Site Generation (SSG). В результате тяжёлая работа по построению DOM и подготовке метаданных происходит единожды в процессе билда Vercel, а пользователь получает готовый файл HTML/JS из Edge‑CDN за меньше 50 мс. Такой подход позволяет достичь «0 ms latency» с точки зрения клиентского восприятия, поскольку сервер уже отдалён от запроса.
Перенос вычислений в браузер: приватность по‑умолчанию
Большинство онлайн‑инструментов для разработчиков работают в режиме сервер‑рендеринга, что вынуждает передавать пользовательские данные (токены, конфиги, схемы) на бекенд. Это создает потенциальные утечки информации. Чтобы полностью исключить сетевой обмен, логика работы утилит была вынесена в клиентскую часть.
Для этого каждый компонент, отвечающий за обработку входных данных, импортировался через next/dynamic с опцией { ssr: false }. Такой импорт гарантирует, что при рендеринге страницы сервер не будет выполнять код, связанный с парсингом или криптографией. Все библиотеки (например, quicktype-core для генерации структур Rust, crypto-js для вычисления SHA‑256) работают в памяти браузера.
Пользовательский опыт выигрывает: нажатие кнопки «Format» не вызывает никаких HTTP‑запросов, а результат появляется мгновенно. С точки зрения безопасности, приложение способно функционировать полностью офлайн – даже при отключённом Wi‑Fi пользователь сохраняет возможность использовать инструменты без риска утечки данных.
«Suspense»‑проблема в Next.js 15 и аналитика
Следующим вызовом стал интегрированный сбор аналитики. В Next.js 15 попытка получить параметры поисковой строки через хук useSearchParams() внутри компонента, использующего Suspense, приводила к ошибкам в режиме сервер‑рендеринга. Поскольку основные вычисления отключены от SSR, аналитический код должен был работать исключительно на клиенте.
Решение заключалось в обёртывании вызова useSearchParams() в условный блок, проверяющий наличие окна (typeof window !== 'undefined'). Затем данные отправлялись в прокси‑слой PostHog, реализованный как отдельный API‑маршрут без доступа к базе данных. Такой подход сохраняет полностью клиентскую природу инструмента, одновременно позволяя собирать метрики использования (какие утилиты чаще вызываются, какие локали предпочитают пользователи).
Оптимизация сборки и доставка через Edge CDN
При работе с более чем 140 статическими страниц важно контролировать размер билда. Для этого были применены:
| Техника | Эффект |
|---|---|
| Tree shaking | Удаление неиспользуемых экспортов из библиотек (quicktype-core, crypto-js). |
| Code splitting | Динамический импорт каждой утилиты в отдельный чанк, загружаемый только при переходе на соответствующий маршрут. |
| Compress & Brotli | Автоматическое сжатие HTML/JS файлов на уровне Vercel, что уменьшает время передачи данных. |
| Edge‑caching | Кеширование готовых страниц на ближайшем к пользователю Edge‑узле, сокращая RTT до нескольких миллисекунд. |
Эти меры позволяют поддерживать размер каждого HTML‑файла в диапазоне 5–10 KB, а общий размер билда не превышает 2 MB, что быстро распространяется по глобальной сети CDN.
Практические выводы
- Фабричный подход к маршрутам упрощает масштабирование: добавление новой утилиты требует лишь записи её в конфигурационную карту, без создания новых файлов‑страниц.
- Полное отключение SSR для бизнес‑логики обеспечивает приватность, ускоряет отклик и делает приложение независимым от сетевых условий.
- Работа с
Suspenseв Next.js 15 требует осознанного разделения клиентского и серверного кода; любые хуки, зависящие от браузерных API, должны быть защищены проверкой окружения. - Edge‑доставка в сочетании с SSG позволяет достичь практически нулевой задержки даже при большом количестве статических страниц.
Эти принципы позволяют построить высокопроизводительное, полностью клиент‑ориентированное веб‑приложение на Next.js 15, способное обслуживать сотни утилит без обращения к базе данных и без компромиссов в области безопасности.