Як клієнт взаємодіє із сервером?

Повне пояснення

Що це і навіщо Клієнт (frontend) взаємодіє з сервером через мережу, надсилаючи HTTP‑запити і отримуючи відповіді. Це основний механізм обміну даними між користувачем і бекендом.

Ключові принципи/терміни

• HTTP request / response – протокол, що визначає структуру запиту і відповіді.
• REST / GraphQL – стилі API, що впливають на формат запитів.
• CORS – політика крос‑доменної взаємодії, що обмежує доступ.

Як це працює

1. Клієнт формує запит (URL, метод, заголовки, тіло).
2. Запит надсилається через TCP‑соединення до сервера.
3. Сервер обробляє логіку, звертається до БД, формує відповідь.
4. Сервер повертає HTTP‑статус і тіло (JSON, HTML, XML).
5. Клієнт парсить відповідь і оновлює UI.

Практика та реалізація (JavaScript/TypeScript)

// fetch приклад
const res = await fetch('/api/users', {
  method: 'GET',
  headers: { 'Accept': 'application/json' }
});
const data = await res.json();

// axios приклад
import axios from 'axios';
const { data } = await axios.post('/api/login', {
  email, password
});

Тестування

• Unit: мокати fetch/axios за допомогою jest‑mock.
• Integration: Supertest + Jest для тестування реального API.
• E2E: Playwright, Cypress – симулюють повний цикл клієнт‑сервер.

Безпека та приватність

• HTTPS – шифрує трафік.
• JWT / OAuth2 – авторизація.
• Input validation – запобігає SQL‑ін’єкціям, XSS.

Оптимізація

• Cache‑контроль (ETag, Cache‑Control) – зменшує кількість запитів.
• Lazy loading – завантажує дані лише при потребі.

Часті помилки

1. Невірний CORS‑заголовок → 403.
2. Необроблений Promise → uncaught rejection.
3. Перевантаження API – rate‑limit.
4. Поганий JSON‑парсинг → SyntaxError.

Cheatsheet

• fetch(url, {method, headers, body})
• axios.get/post/put/delete(url, data)
• response.ok → статус 200‑299.

Follow‑up питання

• Як реалізувати WebSocket‑комунікацію?
• Які переваги REST над GraphQL?