> Что такое SPA приложение (JavaScript)

SPA (Single Page Application) - это веб-приложение, которое загружает единственную HTML-страницу и динамически обновляет её содержимое без полной перезагрузки страницы при взаимодействии пользователя. В отличие от традиционных многостраничных приложений (MPA), где каждый переход на новый URL требует запроса к серверу и перерисовки всего DOM, SPA работает по принципу: после первоначальной загрузки все последующие изменения UI происходят на клиенте с помощью JavaScript.

Основные характеристики SPA:

• Маршрутизация на клиенте: URL меняется через History API (например, pushState), но сервер не обрабатывает эти запросы - только отдаёт index.html.
• Асинхронная загрузка данных: Используются AJAX-запросы (через fetch или XMLHttpRequest) для получения JSON с сервера без перезагрузки страницы.
• Динамический рендеринг: DOM обновляется напрямую с помощью фреймворков (React, Vue, Angular) или нативного JavaScript.

Пример простого SPA на JavaScript:

JAVASCRIPT
// Обработчик клика по ссылке
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const url = link.getAttribute('href');
    // Изменяем URL без перезагрузки
    history.pushState(null, '', url);
    // Загружаем контент асинхронно
    fetch(`/api/content${url}`)
      .then(res => res.text())
      .then(html => {
        document.getElementById('content').innerHTML = html;
      });
  });
});

Преимущества SPA: быстрая навигация (нет мерцания при перезагрузке), меньше нагрузки на сервер (только данные), плавный UX. Недостатки: сложность SEO (требуется SSR или prerendering), больше времени на первоначальную загрузку (из-за тяжёлого JS-бандла), проблемы с историей браузера (нужно явно управлять состоянием).