Как устроен веб ChatGPT на 1 миллиард пользователей: реверс-инжиниринг стека OpenAI 🧠
Стек и эволюция ChatGPT Web: React Router 7, Vite, SSR-стриминг, анонимный доступ, фича-флаги и защита от ботов.
На сайте performance.dev вышел шикарный технический разбор фронтенда чата GPT. На первый взгляд интерфейс кажется примитивным, но под капотом там развернута одна из самых производительных и масштабируемых архитектур в современном вебе.
Самое интересное — OpenAI почти не используют кастомные велосипеды и проприетарные фреймворки (в отличие от той же Google с её Gemini), а собирают стек из стандартных open-source решений.
Текущий стек ChatGPT Web (середина 2026 года): — Рантайм и фреймворк: React 19 + React Router 7 (в полноценном framework mode со стримингом и SSR). — Сборщик: Vite (с разделением JS и CSS на чанки для каждого роута). — Стили и компоненты: Tailwind CSS + Radix UI primitives. — Текстовые редакторы: ProseMirror (для поля ввода промпта) и CodeMirror 6 (для блоков кода и холста Canvas). — Инфраструктура: Cloudflare (кэш, CDN, защита от ботов) + TanStack Query для управления серверным состоянием на клиенте.
Эволюция архитектуры: от Next.js к React Router — Эра Next.js (2022–2024): ChatGPT стартовал на Next.js 12 с Pages Router. Что примечательно, OpenAI сознательно пропустили всю эпоху App Router и оставались на старых страницах около 21 месяца. — Эра Remix (осень 2024): Команда мигрировала на Remix. Изначально это был почти чистый SPA-подход: сервер отдавал пустую гидратационную оболочку, а данные гонялись через TanStack Query. — Эра React Router 7 (сейчас): После слияния Remix и React Router проект переехал на RR7. Теперь они выжали педаль SSR в пол: неавторизованная страница полностью рендерится на сервере и стримится в виде готового HTML. Более того, все 354 роута (включая лендинги и маркетинг) живут в одном монолите. Переход с промо-страницы в чат — это мгновенная клиентская навигация, а не перезагрузка.
Борьба за миллисекунды и TTI
— Вход без авторизации (Render-first): Главная фича для удержания — отсутствие экрана логина при первом заходе. Чтобы обойти это архитектурно, бэкенд имеет параллельное анонимное API (/backend-anon/me, /backend-anon/conversation), выдающее юзеру временный ID для прохождения лимитов и флагов.
— Инлайны в <head>: До загрузки основных бандлов запускается скрипт, считывающий тему из localStorage (чтобы избежать мерцания белого экрана в темной теме), и встроенный трекер производительности, который логирует точное время старта выполнения HTML и первый кадр анимации (requestAnimationFrame).
Флаги на $1.1 млрд и защита от ботов
- Система экспериментов ChatGPT колоссальна: одновременно крутятся сотни тестов. OpenAI настолько плотно сидели на платформе фича-флагов Statsig, что в сентябре 2025 года просто купили эту компанию за $1.1 млрд, сделав её основателя CTO своего прикладного направления.
- Чтобы бесплатный анонимный доступ не сожрал все GPU-ресурсы компании, под капотом развернута невидимая защита: Cloudflare Proof-of-Work (заставляет процессор клиента выполнить микро-вычисление для подтверждения, что это живой браузер) + собственная антифрод-система Sentinel, которая крутится в изолированном iframe.
Удивительно, как стандартный стек на React Router, Vite и Tailwind вывозит миллиардный трафик за счет грамотного серверного стриминга и агрессивной оптимизации критического пути рендеринга.
Как вам такой подход? Кто-то ещё разделяет мнение, что для большинства сложных продуктовых приложений «чистый» SPA в связке с мощным роутером — это лучший выбор, или стриминг HTML с сервера всё-таки побеждает?