Как можно обращаться к серверу?

Способы обращения к серверу с фронтенда

В современной веб-разработке существует несколько основных способов взаимодействия с сервером. Каждый имеет свои преимущества и применяется в зависимости от конкретной ситуации.

1. Fetch API (современный стандарт)

Fetch — это современный встроенный API для выполнения HTTP запросов. Это стандартный способ в текущих проектах.

// GET запрос
fetch("/api/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// POST запрос
fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "John" })
})
  .then(response => response.json())
  .then(data => console.log(data));

// Использование async/await
async function getUsers() {
  const response = await fetch("/api/users");
  const data = await response.json();
  return data;
}

Преимущества: встроенный API, нет зависимостей, промисы, хороший контроль над запросами.

2. XMLHttpRequest (устаревший, но все ещё поддерживается)

XMLHttpRequest — старый способ, который предшествовал Fetch. Хотя он всё ещё работает, его вытеснил более современный Fetch.

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users");
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.onerror = () => console.error("Request failed");
xhr.send();

Этот подход используется редко в новых проектах.

3. Axios (популярная библиотека)

Axios — это популярная библиотека для HTTP запросов, предоставляющая удобный API.

// GET запрос
axios.get("/api/users")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST запрос
axios.post("/api/users", { name: "John" })
  .then(response => console.log(response.data));

// Конфигурация и перехватчики
const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Authorization": "Bearer token" }
});

instance.interceptors.response.use(
  response => response,
  error => Promise.reject(error)
);

Преимущества: удобные перехватчики запросов и ответов, автоматическая сериализация JSON, встроенная обработка таймаутов, отмена запросов.

4. WebSocket (для реального времени)

WebSocket используется для двусторонней коммуникации в реальном времени. Подходит для чатов, уведомлений, live-данных.

const ws = new WebSocket("wss://api.example.com/ws");

ws.onopen = () => {
  console.log("Соединение установлено");
  ws.send(JSON.stringify({ type: "subscribe", channel: "messages" }));
};

ws.onmessage = (event) => {
  console.log("Получено:", event.data);
};

ws.onerror = (error) => console.error("WebSocket ошибка:", error);
ws.onclose = () => console.log("Соединение закрыто");

5. GraphQL (альтернативная архитектура API)

GraphQL — это язык запросов, позволяющий запрашивать ровно те данные, которые нужны.

// С помощью Apollo Client
import { ApolloClient, useQuery, gql } from "@apollo/client";

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function Users() {
  const { data, loading, error } = useQuery(GET_USERS);
  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;
  return <ul>{data.users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

6. Server-Sent Events (SSE)

SSE позволяет серверу отправлять обновления клиенту через одно долгоживущее соединение.

const eventSource = new EventSource("/api/notifications");

eventSource.onmessage = (event) => {
  console.log("Новое уведомление:", event.data);
};

eventSource.onerror = () => {
  eventSource.close();
  console.log("Соединение разорвано");
};

Выбор способа

• REST API с Fetch — стандартный выбор для большинства случаев
• Axios — если нужны доп. возможности (перехватчики, отмена запросов)
• WebSocket — для real-time приложений
• GraphQL — когда нужна гибкость и оптимизация трафика
• SSE — для uni-directional обновлений от сервера

В современных Next.js приложениях часто используют Fetch с async/await, иногда в комбинации с библиотеками вроде SWR или React Query для кеширования и синхронизации данных.