Современные сайты часто строятся как SPA (Single Page Application), чтобы добиться плавных переходов и динамических интерфейсов. Но у SPA есть свои недостатки о которых все уже знают: большие JavaScript-бандлы, гидрация, сложности с SEO и скроллом. Часто вместо настоящей плавности мы получаем имитацию — и сайт становится медленным.
К счастью, современные браузеры предоставляют инструменты, которые позволяют создать эффект SPA, используя чистый HTML и CSS.
View Transitions: плавные переходы страниц
Одной из самых впечатляющих возможностей современных браузеров стали View Transitions. Они позволяют анимировать переход между страницами, но при этом страница полностью загружается с настоящим URL.
Как это работает: при клике на ссылку браузер сначала создаёт виртуальную копию текущей страницы, затем загружает новую страницу. После этого браузер сравнивает старую и новую страницы и плавно проигрывает анимацию между ними. Когда анимация заканчивается, новая страница остаётся полностью интерактивной.
Добавить плавный эффект между страницами можно буквально несколькими строками CSS. Например, простое появление и исчезновение контента:
Этот код можно разместить в общем CSS-файле сайта. При переходе по обычной ссылке, например с index.html на about.html , браузер создаёт снимок текущей страницы, загружает новую и сам выполняет плавную анимацию между ними.
В результате страницы сменяются с мягким затемнением, без JavaScript, гидрации и маршрутизаторов — нативно, как будто переход происходит внутри приложения.
Переходы общих элементов
Особенно выразительно эффект проявляется, когда на обеих страницах присутствуют одинаковые элементы. В этом случае браузер «понимает», что это один и тот же объект в разных состояниях, и плавно превращает один в другой.
Классический пример — карточка товара. На странице каталога она показана в миниатюре, а на странице самого товара — в полном размере. Достаточно указать одинаковое значение view-transition-name, чтобы браузер связал эти два изображения.
После клика по карточке миниатюра не исчезает резко — она как бы увеличивается и превращается в крупное изображение. При возврате обратно эффект работает в обратную сторону.
При этом разработчику не нужно подключать фреймворки или писать сложные скрипты. Всё делает сам браузер — вычисляет положение элемента, его размеры и плавно меняет одно состояние на другое. Такое поведение создаёт ощущение работы SPA-приложения, хотя на самом деле происходит полноценная загрузка новой страницы.
JS-переходы внутри страницы
Да, View Transitions умеют не только анимировать переходы между страницами, но и работать внутри одной страницы, когда что-то меняется в интерфейсе — например, переключается тема, открывается модалка или обновляется блок с данными.
В обычной ситуации при таких изменениях браузер просто перерисовывает DOM — без плавности, мгновенно. View Transitions меняют этот процесс: браузер создаёт снимок текущего состояния страницы, выполняет указанные изменения в DOM, а затем плавно анимирует разницу между старым и новым состоянием.
Пример с переключением темы выглядит максимально просто:
Когда вызывается startViewTransition, браузер сохраняет текущее состояние, применяет изменения внутри переданной функции и затем аккуратно анимирует переход между ними. Визуально кажется, будто страница перетекает из одной темы в другую, без резкой смены цвета и мигания.
Такой приём можно использовать не только для темы, но и для любых небольших динамических изменений в интерфейсе: обновления текста, смены изображения, открытия блока или замены карточки контента. Главное, чтобы само изменение происходило внутри колбэка startViewTransition — тогда браузер поймёт, что именно нужно анимировать, и сделает всё автоматически.
Это превращает даже самые простые сайты в современные приложения, где всё работает плавно и естественно, без тяжёлого JavaScript и внешних библиотек.
Speculation Rules: мгновенная навигация
Чтобы переходы выглядели не просто плавно, но и происходили почти мгновенно, в спецификации предусмотрен механизм Speculation Rules. Он даёт браузеру подсказку: какие страницы стоит заранее предзагрузить или отрендерить — до того, как пользователь кликнет по ссылке.
Например, при наведении курсора на ссылку браузер может сразу начать загружать следующую страницу в фоне. Когда пользователь всё-таки нажимает, страница уже готова, и переход выглядит как телепорт — без спиннеров, белых экранов и ожидания загрузки.
В этом примере браузер будет предзагружать все страницы, на которые ведут ссылки (<a>).
Но использовать эту возможность стоит осторожно. Если сайт тяжёлый, содержит много JavaScript или медленно рендерится, такая предзагрузка не ускорит работу — она просто перенесёт нагрузку на устройство пользователя. В результате страница, на которую он даже не перейдёт, уже загрузит скрипты, изображения и данные, расходуя трафик и память.
Оптимальный сценарий — лёгкие сайты или страницы с простыми шаблонами, где HTML и стили можно загрузить заранее без заметного влияния на производительность. Например, каталог с карточками товаров, блог или лендинг с небольшой интерактивностью.
Если же на сайте используется SPA-фреймворк, много динамических компонентов или тяжелые медиа, лучше ограничить предзагрузку только самых вероятных переходов — например, тех, на которые пользователь чаще всего нажимает.
Выводы
Современные браузеры открывают путь к сайтам, которые ощущаются так же плавно, как приложения, но при этом остаются классическими по своей архитектуре. Переходы страниц можно делать мягкими с помощью View Transitions, а общие элементы — анимировать между разными состояниями. Даже без фреймворков можно создавать динамичные эффекты с простыми JS-анимациями, а с помощью Speculation Rules — ускорять переходы почти до мгновенных.
SPA-фреймворки остаются полезными там, где требуется сложная клиентская логика, постоянное обновление интерфейса без перезагрузки и тесная работа с данными — например, в дашбордах, кабинетах или веб-приложениях. Но если сайт в основном показывает контент, статьи, карточки, галереи или лендинги, то классический подход с этими новыми технологиями даёт почти тот же пользовательский опыт — с меньшей сложностью, лучшей индексируемостью и более быстрой загрузкой.
Таким образом, выбор между SPA и «нативными» переходами теперь перестал быть компромиссом между удобством и производительностью. Браузер сам становится фреймворком — лёгким, предсказуемым и готовым к плавным переходам по умолчанию.