Перейти к основному содержимому

[Hard] 📄 Framework

1. Объясните и сравните преимущества и недостатки SPA и SSR​

Объясните и сравните преимущества и недостатки SPA и SSR.

SPA (Single-Page Application)​

Преимущества SPA​

  1. Пользовательский опыт: SPA фактически представляет собой одну страницу. Благодаря динамической загрузке данных и клиентской маршрутизации пользователи ощущают переключение страниц, но на самом деле приложение переключает компоненты, что воспринимается более плавно и быстро.
  2. Разделение фронтенда и бэкенда: фронтенд фокусируется на рендеринге и взаимодействии, а бэкенд предоставляет API данных. Это снижает связанность и улучшает сопровождаемость.
  3. Оптимизация сети: поскольку страница загружается один раз, избегается полная перезагрузка при каждой навигации (как в традиционных многостраничных приложениях), что сокращает количество запросов и нагрузку на сервер.

Недостатки SPA​

  1. Проблемы с SEO: контент SPA часто рендерится динамически, поэтому поисковые системы могут индексировать его менее надёжно, чем традиционный HTML (хотя Google улучшил это).
  2. Время начальной загрузки: SPA должны загрузить и выполнить JavaScript на клиенте перед рендерингом, поэтому первая загрузка может быть медленнее, особенно при слабом соединении.

SSR (Server-Side Rendering)​

Преимущества SSR​

  1. SEO: SSR рендерит HTML с данными на сервере, поэтому поисковые системы могут сканировать содержимое страницы напрямую. Это главное преимущество SSR.
  2. Скорость начального рендеринга: работа по рендерингу переносится на сервер, что обычно улучшает первую отрисовку/доставку контента.

Недостатки SSR​

  1. Кривая обучения и сложность: фреймворки вроде Next и Nuxt основаны на React/Vue, но имеют собственные экосистемы и соглашения, что повышает стоимость обучения и миграции.
  2. Более высокая нагрузка на сервер: поскольку рендеринг выполняется на сервере, пики трафика могут увеличить нагрузку на инфраструктуру.

Заключение (Conclusion)​

В целом, если вы создаёте внутреннюю административную систему без требований к SEO, SSR обычно не нужен. Для продуктовых сайтов, ориентированных на поиск, стоит рассмотреть использование SSR.

2. Опишите использованные вами веб-фреймворки и сравните их плюсы и минусы​

В последние годы оба фреймворка сходятся к функционально-ориентированной компонентной разработке:

Vue 3 использует Composition API для разделения логики на переиспользуемые composables, а React основан на Hooks. Опыт разработки весьма схож, но в целом Vue проще для старта, а React сильнее по размеру экосистемы и гибкости.

Vue (в основном Vue 3)​

Преимущества:

  • Более плавная кривая обучения: SFC (Single File Component) объединяет шаблон/скрипт/стили, что удобно для разработчиков, привыкших к традиционным шаблонным подходам.
  • Чёткие официальные соглашения, хорошо для команд: Vue предоставляет понятные руководства по стилю и соглашения (структура, именование, декомпозиция компонентов), что упрощает единообразие в команде.
  • Полная основная экосистема: Официально поддерживаемые инструменты, такие как Vue Router и Pinia (или Vuex), плюс инструментарий сборки, снижают нагрузку по принятию решений.
  • Composition API улучшает сопровождаемость: Логику можно извлечь в composables (например, useAuth, useForm) для разделения поведения и уменьшения дублирования в крупных проектах.

Недостатки:

  • Меньшая экосистема/сообщество по сравнению с React: Объём и разнообразие сторонних пакетов ниже. Некоторые передовые инструменты или интеграции (дизайн-системы, нишевые библиотеки) в первую очередь рассчитаны на React.
  • Концентрация на рынке труда по регионам/отраслям: По сравнению с React многие глобальные и международные команды предпочитают React, что может снизить гибкость карьеры на некоторых рынках.

React​

Преимущества:

  • Большая экосистема и быстрые инновации: Большинство фронтенд-технологий, дизайн-систем и сторонних сервисов в первую очередь поддерживают React (UI-библиотеки, графики, редакторы, дизайн-системы и т.д.).
  • Высокая гибкость в формировании стека: Работает с Redux/Zustand/Recoil и мета-фреймворками, такими как Next.js/Remix. Зрелые решения существуют для SPA, SSR, SSG и CSR.
  • Зрелая интеграция с TypeScript и инструментарием: Сообщество обладает обширными лучшими практиками по типизации и крупномасштабной инженерии, полезными для долгосрочного сопровождения.

Недостатки:

  • Слишком большая свобода требует командных соглашений: Без чётких стандартов кодирования и архитектуры команды могут создавать несогласованные паттерны, увеличивая стоимость сопровождения.
  • Кривая обучения на практике не маленькая: Помимо самого React (JSX и Hooks) разработчикам нужно выбирать маршрутизацию, управление состоянием, загрузку данных и подходы к SSR.
  • Быстрая эволюция API и лучших практик: От классовых компонентов к функциональным + hooks и затем к серверным компонентам — сосуществование старых и новых паттернов увеличивает накладные расходы на миграцию.