77 lines
2.2 KiB
Markdown
77 lines
2.2 KiB
Markdown
# Выбор фронтенда
|
|
|
|
---
|
|
|
|
## 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 — стандарт)
|