- Опубликовано
SPA заказывали?
- Автор
- Имя
- Максим | Системный анализ
- Telegram
- Максим | Системный анализ349 подписчиков82 постаКак войти в IT через системный анализ и получить оффер от 270к+. Опыт Senior аналитика из топ-банков. Разборы, практика, собесы, техника мышления аналитика. Бесплатная консультация - в закрепе.
Кратко
SPA заказывали?Нет, это не про процедуры, а про single page application: сайты-одностраничникиГлавная суть: браузер загружает страницу один раз, а...
SPA заказывали?
Нет, это не про процедуры, а про single page application: сайты-одностраничники
Главная суть: браузер загружает страницу один раз, а все дальнейшие действия пользователя (клики, переходы по вкладкам, отправка форм) происходят без перезагрузки страницы целиком. Обновляется только та часть экрана, которая действительно изменилась
Как это работает?
Сервер отдает браузеру один пустой HTML-файл (условный <div id="app"></div>) и связку тяжелых JavaScript-файлов
JavaScript загружается, "оживляет" страницу и полностью берет на себя управление интерфейсом (это называется CSR: Client-Side Rendering)
Когда вы что-то нажимаете, JS отправляет на сервер запрос, но просит не целую HTML-страницу, а только данные
Получив данные, JS подставляет их в заранее заготовленные шаблоны и перерисовывает только нужный блок
Особенно активно применяются SPA для сайтов, где есть сообщения: электронная почта, мессенджеры
Противоположность SPA это MPA (multi page application). Они отличаются друг от друга технической реализацией в фронтенд-фреймворках (react, angular, vue, next)
О чем должен подумать аналитик при применении SPA на проекте?
Первый запуск может быть долгим, особенно на слабых телефонах (нужно загрузить очень много JS-кода). Что в это время будет видеть пользователь? На самом деле, тут можно использовать гибридный подход: для первоначальной загрузки сделать SSR - Server Side Rendering, когда HTML полностью генерится на стороне сервера. А когда JS дозагрузился, использовать Client Side Rendering (как описано выше)
Что происходит с данными на экране, пока идет запрос к серверу?
Что видит пользователь, если интернет пропал, а он пытается отправить форму?
Что показывает интерфейс при ошибке 500 или 404? В SPA нельзя просто показать стандартную страницу сервера: нужен попап или заглушка
Если заказчик хочет увидеть на веб-странице "тяжёлую" функциональность, лучше применить lazy loading: загружать только после того, как пользователь нажал соответствующую кнопку. А если писать код неаккуратно, SPA может раздуваться и тормозить, так как страницы работает без перезагрузок месяцами (пока вкладка открыта)
Аутентификация. Об этом - в отдельном посте
Предыдущий пост
- Опубликовано










