В чем разница между знакомыми тебе типами архитектуры

«В чем разница между знакомыми тебе типами архитектуры» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Монолитная архитектура — все компоненты приложения (UI, бизнес-логика, БД) тесно связаны и развертываются как единое целое. Простота разработки, но сложность масштабирования.

Клиент-серверная (CS) — клиент (браузер/приложение) отправляет запросы серверу, который обрабатывает их и возвращает данные. Четкое разделение ответственности, но сервер может стать узким местом.

Микросервисная — приложение разбито на независимые сервисы (например, аутентификация, платежи), которые общаются через API. Гибкость и масштабируемость, но сложность управления.

SPA (Single Page Application) — весь UI загружается один раз, дальнейшие изменения происходят динамически (React, Vue). Быстрый UX, но сложности с SEO.

SSR (Server-Side Rendering) — страницы рендерятся на сервере (Next.js, Nuxt). Лучше для SEO, но нагрузка на сервер выше.

Пример SPA vs SSR:

// SPA (React)
function App() {
  return <div>Динамический контент</div>;
}

// SSR (Next.js)
export async function getServerSideProps() {
  return { props: { data: "Рендерится на сервере" } };
}