Как с помощью Promise загрузить данные с бэкенда после отображения статического контента?

Идея в том, чтобы не блокировать отрисовку страницы ожиданием данных с сервера. Браузер сначала парсит HTML и CSS, показывает статический каркас интерфейса, а уже потом JavaScript инициирует запрос к API. Запрос возвращает Promise, который разрешается, когда сервер присылает ответ.

Как это работает

• HTML и CSS рендерятся сразу, пользователь видит скелетон или заглушки.
• Скрипт запускает fetch, который возвращает Promise.
• Через .then() или await обрабатываем результат и обновляем DOM.
• Пока данные грузятся, можно показать индикатор загрузки.

Пример кода

document.addEventListener('DOMContentLoaded', async () => {
  const container = document.getElementById('content');
  container.textContent = 'Загрузка...';

  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('Ошибка сети');
    const data = await response.json();
    container.innerHTML = data.items.map(i => `<li>${i.name}</li>`).join('');
  } catch (err) {
    container.textContent = 'Не удалось загрузить данные';
    console.error(err);
  }
});

Такой подход часто применяется в SPA и на страницах с динамическим контентом: сначала отдаём статику, потом догружаем данные. Это улучшает метрики First Contentful Paint и воспринимаемую производительность.

Итог: применяйте этот паттерн, когда важна быстрая первая отрисовка и данные не критичны для базовой структуры страницы.