Какие этапы проходит запрос с Frontend

Этапы обработки запроса от Frontend до Backend

Полный цикл request-response включает множество этапов, начиная от браузера пользователя и заканчивая базой данных. Понимание этого процесса критично для оптимизации производительности и отладки проблем.

1. Фаза Frontend

Инициализация запроса:

// Frontend - React / Vue / Angular
const response = await fetch('/api/v1/users/123', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token123'
    }
});

// Что происходит:
// 1. Браузер парсит URL
// 2. Проверяет кэш (HTTP cache)
// 3. Разрешает DNS имя в IP адрес
// 4. Устанавливает TCP соединение
// 5. Если HTTPS - TLS handshake
// 6. Отправляет HTTP запрос

DNS Resolution:

api.example.com → DNS Query → 192.168.1.100 (IP address)

TCP Connection:

1. SYN (браузер → сервер)
2. SYN-ACK (сервер → браузер)
3. ACK (браузер → сервер)
→ Соединение установлено

HTTPS/TLS Handshake:

1. Client Hello (поддерживаемые версии, cipher suites)
2. Server Hello (выбранная версия, сертификат)
3. Key Exchange (установка ключей шифрования)
4. Finished (оба стороны готовы)
→ Защищённое соединение

2. Network слой

HTTP Request передача:

GET /api/v1/users/123 HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: application/json
Connection: keep-alive

[body если POST/PUT]

Load Balancer (если есть):

Request → Load Balancer (nginx, HAProxy)
         → Выбирает backend сервер по алгоритму
         → Forward на Instance 1/2/3

3. Web Server слой (Tomcat / Undertow)

// Tomcat получает HTTP запрос
// 1. Парсит HTTP заголовки
// 2. Парсит URL path и query параметры
// 3. Создаёт HttpServletRequest и HttpServletResponse объекты
// 4. Пробрасывает через Filter цепь

@Component
public class LoggingFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                       FilterChain chain) throws IOException, ServletException {
        System.out.println("Request received: " + 
            ((HttpServletRequest)request).getRequestURI());
        
        chain.doFilter(request, response);
        
        System.out.println("Response sent: " + 
            ((HttpServletResponse)response).getStatus());
    }
}

4. Spring Framework слой

Filter цепь:

HttpRequest
  ↓
[1] Authentication Filter
  ├─ JWT токен валидация
  ├─ User загрузка из БД
  └─ SecurityContext установка
  ↓
[2] CORS Filter
  ├─ Проверка Origin
  └─ CORS headers добавление
  ↓
[3] Request Logging Filter
  └─ Логирование параметров
  ↓
DispatcherServlet
  ↓
Routing к Controller

Routing и Controller выполнение:

@RestController
@RequestMapping("/api/v1/users")
public class UserController {
    @GetMapping("/{id}")
    public ResponseEntity<UserDTO> getUser(@PathVariable Long id) {
        // Spring:
        // 1. Парсит path variable (@PathVariable)
        // 2. Парсит query parameters (@RequestParam)
        // 3. Парсит body если есть (@RequestBody)
        // 4. Валидирует параметры (@Valid)
        // 5. Инжектирует зависимости
        // 6. Вызывает метод
        
        User user = userService.getUser(id);
        return ResponseEntity.ok(UserMapper.toDTO(user));
    }
}

5. Application слой

Service вызов:

@Service
public class UserService {
    @Transactional(readOnly = true)
    public User getUser(Long id) {
        // 1. Проверка бизнес-логики
        // 2. Кэш проверка (Redis)
        if (cache.contains(id)) {
            return cache.get(id); // Быстро!
        }
        
        // 3. Если не в кэше - запрос к БД
        User user = userRepository.findById(id)
            .orElseThrow(UserNotFoundException::new);
        
        // 4. Кэширование результата
        cache.put(id, user);
        
        return user;
    }
}

6. Repository / Data Access слой

Database Query:

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    User findById(Long id);
}

// Spring Data генерирует SQL:
SELECT * FROM users WHERE id = ?

// Что происходит:
// 1. Получение соединения из Connection Pool (HikariCP)
// 2. Подготовка statement (PreparedStatement)
// 3. Установка параметров (@PathVariable значение)
// 4. Выполнение query
// 5. Парсинг ResultSet
// 6. Маппинг на User entity
// 7. Возврат соединения в pool

Database execution:

Query → Database Parser
      → Query Optimizer (выбирает индекс)
      → Execution Plan
      → Index Lookup (если индекс есть)
      → Return результаты

7. Возврат результата

Response построение:

// Spring сериализует объект
UserDTO userDTO = UserMapper.toDTO(user);

// Jackson конвертирует в JSON
{
  "id": 123,
  "name": "John",
  "email": "john@example.com",
  "createdAt": "2024-01-15T10:30:00Z"
}

// Spring установит headers
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 78
Cache-Control: max-age=3600
ETag: "abc123"

8. Network ответ

HTTP Response передача:

Server → Network → Load Balancer → Browser
        ↓
      Compression (gzip если поддерживается)
        ↓
      TCP segmentation
        ↓
      Отправка пакетов

9. Frontend обработка

Browser side:

// 1. Получение ответа
const response = await fetch('/api/v1/users/123');

// 2. Парсинг статуса
if (response.ok) { // 200-299
    // 3. Парсинг JSON
    const user = await response.json();
    
    // 4. Update state в компоненте
    setUser(user);
    
    // 5. Перерисовка UI (React reconciliation)
    // Virtual DOM → Diff → DOM update
    
    // 6. Кэширование в localStorage если нужно
    localStorage.setItem(`user_${id}`, JSON.stringify(user));
}

Полная диаграмма

┌─────────────────┐
│   Frontend      │ (1) User clicks button
│   (React)       │     fetch('/api/v1/users/123')
└────────┬────────┘
         │
    (2) DNS Resolution
    (3) TCP Connection
    (4) HTTPS/TLS Handshake
         │
    ┌────▼─────────────────┐
    │   Network (HTTP)      │
    │ GET /api/v1/users/123 │
    │ Headers, Body         │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Load Balancer        │
    │  nginx / HAProxy      │
    │  Choose: Server 1-4   │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Web Server           │
    │  Tomcat / Undertow    │
    │  Parse HTTP Request   │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Spring Framework     │
    │  - Filters            │
    │  - Auth / CORS        │
    │  - DispatcherServlet  │
    │  - Route to Controller│
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Controller           │
    │  getUserUser(123)     │
    │  Validation           │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Service Layer        │
    │  UserService.getUser()│
    │  Cache check          │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Repository           │
    │  UserRepository       │
    │  findById(123)        │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Connection Pool      │
    │  HikariCP             │
    │  Get Connection       │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Database             │
    │  SELECT * FROM users  │
    │  WHERE id = 123       │
    │  Execute Query        │
    │  Return ResultSet     │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  ORM Mapping          │
    │  Hibernate/JPA        │
    │  ResultSet → Entity   │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Service Layer        │
    │  Return to Controller │
    │  Cache result         │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Serialization        │
    │  Object → JSON        │
    │  Jackson              │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  HTTP Response        │
    │  200 OK               │
    │  Content-Type: JSON   │
    │  {"id": 123, ...}     │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Network (HTTP)       │
    │  Send Response        │
    │  Gzip Compression     │
    └────┬──────────────────┘
         │
    ┌────▼──────────────────┐
    │  Browser              │
    │  (9) Parse JSON       │
    │  (10) Update State    │
    │  (11) Rerender UI     │
    │  (12) Show to User    │
    └──────────────────────┘

Оптимизация каждого слоя

Frontend:

• Кэширование (localStorage, Service Worker)
• Request debouncing
• Lazy loading

Network:

• HTTP/2 или HTTP/3 (multiplexing)
• CDN для static assets
• Gzip compression

Controller:

• @GetMapping + query params вместо POST если возможно
• Pagination для больших результатов
• Selective field loading (@JsonInclude)

Service:

• In-memory cache (Caffeine)
• Async processing для long-running tasks
• Batch operations для БД

Repository:

• Правильные индексы на БД
• SELECT только нужные колонки
• JOIN вместо N+1 queries
• Connection pooling оптимизация

Заключение

Полный request-response цикл включает 9+ этапов. Каждый слой может стать bottleneck. Оптимизация требует профилирования: где медленно? Frontend? Network? Backend? Database? Обычно проблемы на database слое (неправильные индексы, N+1 queries) или network (кэширование, compression).