# Выбор фронтенда

---

## Decision Tree

```mermaid
graph TD
    A[Фронтенд?] --> B{SPA или SSR?}
    B -->|SPA| C[React + Vite + TS]
    B -->|SSR| D[Next.js]
    C --> E{Нужен оффлайн?}
    E -->|Да| F[PWA + vite-plugin-pwa]
    E -->|Нет| G[Без PWA]
```

---

## Варианты

### React + Vite + TypeScript
| | |
|---|---|
| **Когда** | SPA, PWA, мобильное приложение |
| **Плюсы** | Популярный, большая экосистема, Vite быстрый, PWA-ready |
| **Минусы** | SPA — медленный первый заход (но PWA решает) |

### Next.js
| | |
|---|---|
| **Когда** | SSR, SEO, контентный сайт |
| **Плюсы** | SSR, SEO, App Router |
| **Минусы** | Сложнее деплой, не подходит для PWA |

---

## Стили

| Решение | Когда |
|---------|-------|
| **Tailwind CSS** | Всегда (рекомендовано) |
| CSS Modules | Если Tailwind не подходит |
| CSS-in-JS | Не рекомендуется (производительность) |

---

## Состояние

| Решение | Когда |
|---------|-------|
| **React Context + hooks** | Маленькое приложение (< 5 страниц) |
| **zustand** | Среднее приложение (рекомендовано) |
| **RTK** | Большое приложение с множеством запросов |

---

## PWA

**Когда нужен:**
- Приложение должно работать оффлайн
- Пользователи на мобильных устройствах
- Нужно push-уведомления

**Технологии:**
- `vite-plugin-pwa` — генерация service worker
- `manifest.json` — установка на домашний экран
- IndexedDB — оффлайн-хранение

---

## [ASK]

- Нужен ли фронтенд вообще? (API-first или full-stack?)
- SPA или SSR? (SPA+PWA для приложений, SSR для контента)
- Нужна ли PWA? (да, если мобильные пользователи и оффлайн)
- Какой Router? (react-router-dom — стандарт)