Что такое SPA приложение
Что проверяют
Понимаете ли вы, что вместе с переносом навигации в браузер вы забираете себе обязанности сервера: адресную строку, заголовок документа, код ответа, фокус, кэширование. Фронтендеру мало определения, спрашивают про цену решения.
Как отвечать
SPA это приложение, где браузер один раз получает оболочку и дальше меняет содержимое сам: клиентский роутер подменяет представление и пишет адрес через History API, данные приходят отдельными запросами, полной перезагрузки не происходит.
По существу стоит пройти по четырём вещам:
- маршрутизация:
pushStateи событиеpopstate, ссылки остаются ссылками, а серверу нужен возврат оболочки на любой путь, иначе прямой заход на вложенный адрес отдаст 404; - состояние: оно переживает навигацию, отсюда кэш ответов и его инвалидация, отсюда же утечки, если подписки не снимаются при размонтировании;
- загрузка: разбиение бандла по маршрутам, предзагрузка при наведении, скелетон вместо белого экрана;
- рендеринг: для публичных страниц серверный рендер или пререндер с гидратацией, чтобы первый экран и разметка существовали до выполнения скриптов.
Сильный ответ добавляет границу применимости: контентный сайт, живущий на поиске, от SPA выигрывает мало, а редактор, панель или почтовый клиент выигрывают сильно.
Где спотыкаются
Называют SEO единственным минусом и на этом останавливаются. Краулеры давно исполняют скрипты, но платят за это задержкой, и главное остаётся в силе: заголовок, описание и канонический адрес обязаны меняться вместе с маршрутом, иначе все страницы выглядят одинаково и для робота, и для превью в мессенджере.
Забывают про доступность навигации. После смены маршрута фокус остаётся на старом месте, а скринридер молчит, и пользователь не знает, что страница сменилась. Лечится переводом фокуса на заголовок и живой областью с объявлением.
Считают, что раз перезагрузки нет, то и про память думать незачем. Вкладка живёт часами: незакрытые таймеры, сокеты и слушатели копятся, потребление растёт, к вечеру приложение заметно тормозит.