Как меняется контент страницы в SPA?

Как меняется контент страницы в SPA

В Single Page Application (SPA) контент страницы изменяется динамически без полной перезагрузки, что обеспечивает быстрый и плавный пользовательский опыт. Процесс существенно отличается от традиционных веб-приложений.

Основные механизмы изменения контента

1. Изменение состояния (State Management)

Когда пользователь взаимодействует со страницей, изменяется внутреннее состояние приложения:

// React пример
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false);
const [filter, setFilter] = useState('all');

// При клике на фильтр
const handleFilter = (newFilter) => {
  setFilter(newFilter);
  // React автоматически перерисует компоненты
};

Когда состояние меняется, фреймворк автоматически перерисовывает затронутые компоненты.

2. Virtual DOM и Reconciliation

Большинство фреймворков используют Virtual DOM для оптимизации:

• React создаёт виртуальное представление DOM
• Сравнивает новое состояние со старым (diffing)
• Обновляет только изменённые элементы в реальном DOM
• Минимизирует дорогостоящие операции с DOM

// До: Virtual DOM
<div className="post">
  <h2>Старый заголовок</h2>
</div>

// После: Virtual DOM
<div className="post">
  <h2>Новый заголовок</h2>
</div>

// React обновит ТОЛЬКО содержимое <h2>

3. Клиентская маршрутизация

SPA использует History API для навигации без перезагрузки:

// Next.js Router пример
import { useRouter } from 'next/navigation';

const handleNavigate = () => {
  router.push('/questions/123');
  // URL меняется, но страница не перезагружается
};

// История браузера обновляется
window.history.pushState({}, '', '/questions/123');

При этом:

• URL меняется (пользователь видит новый путь)
• Контент обновляется (новые компоненты рендерятся)
• Состояние сохраняется (можно вернуться кнопкой "назад")

Циклы обновления контента

Синхронные обновления (Sync)

const handleClick = () => {
  setCount(count + 1); // Сразу видна на экране
};

Асинхронные обновления (Async)

Часто контент меняется после загрузки данных с сервера:

const fetchQuestions = async () => {
  setLoading(true);
  try {
    const response = await fetch('/api/v1/questions');
    const data = await response.json();
    setQuestions(data); // Контент обновляется
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  fetchQuestions();
}, []);

Порядок:

1. Пользователь видит состояние загрузки (спиннер, skeleton)
2. Данные приходят с сервера
3. Состояние обновляется → контент перерисовывается

Оптимизация производительности

1. Memoization

const MemoizedComponent = React.memo(({ data }) => {
  // Перерисуется только если 'data' изменился
  return <div>{data.title}</div>;
});

2. useCallback для стабильных функций

const handleFilter = useCallback((filter) => {
  setFilter(filter);
}, []); // Функция не пересоздаётся

3. useMemo для дорогостоящих вычислений

const sortedQuestions = useMemo(() => {
  return questions.sort((a, b) => a.difficulty - b.difficulty);
}, [questions]);

Преимущества SPA для изменения контента

• Скорость: Нет перезагрузки страницы
• Плавность: Переходы анимированы
• Опыт: Похоже на нативное приложение
• Кэширование: Частые данные уже в памяти

Недостатки и вызовы

• SEO: Контент генерируется на клиенте (решение: SSR/SSG)
• История браузера: Нужно управлять вручную
• Размер бандла: SPA скрипты больше обычных страниц
• Первый запуск: Initial load медленнее