Вы разработчик, изучающий стек MERN и задающийся вопросом, как получить данные из серверной части и отобразить их во внешнем интерфейсе? Не смотрите дальше! В этой статье блога мы рассмотрим различные методы беспрепятственной передачи данных из серверной части во внешний в стеке MERN.

Прежде чем мы углубимся в примеры кода, давайте кратко вспомним, что такое стек MERN. MERN означает MongoDB, Express, React и Node.js. Это мощное сочетание технологий, используемых для создания полнофункциональных веб-приложений. MongoDB – это база данных, Express — серверная часть, React — интерфейсная часть, а Node.js — платформа, на которой выполняется серверный код.

Теперь давайте рассмотрим некоторые популярные методы получения данных из серверной части и их отображения во внешнем интерфейсе.

1. Вызовы RESTful API.
   Одним из распространенных подходов является создание RESTful API на серверной стороне с помощью Express. Внутренний сервер предоставляет различные конечные точки, которые отвечают запрошенными данными в формате JSON. Во внешнем интерфейсе вы можете использовать JavaScript Fetch API или библиотеки, такие как Axios, для отправки HTTP-запросов к этим конечным точкам и получения данных. Вот пример использования Fetch API:

fetch('/api/posts')
  .then(response => response.json())
  .then(data => {
    // Handle the retrieved data here
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error(error);
  });

2. GraphQL:
   Другой подход, набирающий популярность, — использование GraphQL, языка запросов для API. С помощью GraphQL вы можете определить требования к данным во внешнем интерфейсе и отправить один запрос на серверную часть, которая ответит именно запрошенными данными. Это уменьшает избыточную и недостаточную выборку данных. Библиотеки, такие как Apollo Client, можно использовать во внешнем интерфейсе для интеграции с сервером GraphQL. Вот простой пример:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache()
});
client.query({
  query: gql`
    query {
      posts {
        title
        author
      }
    }
  `
})
  .then(data => {
    // Handle the retrieved data here
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error(error);
  });

3. WebSockets:
   WebSockets обеспечивает двунаправленный канал связи между интерфейсом и сервером, позволяя обновлять данные в режиме реального времени. Вы можете использовать такие библиотеки, как Socket.io, для установки соединения WebSocket. Когда данные серверной части изменяются, обновления могут передаваться во внешний интерфейс без необходимости явных запросов. Вот упрощенный пример:

На сервере:

const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', socket => {
  // Send data to the frontend whenever there's an update
  socket.emit('dataUpdate', { message: 'New data available' });
});
server.listen(3000);

На интерфейсе:

const socket = io('http://localhost:3000');
socket.on('dataUpdate', data => {
  // Handle the received data update here
  console.log(data);
});

Это всего лишь несколько методов получения данных из внутреннего интерфейса во внешний в стеке MERN. В зависимости от требований и предпочтений вашего проекта вы можете выбрать наиболее подходящий подход.

В заключение, при работе со стеком MERN важно понимать, как получать данные из серверной части и отображать их во внешнем интерфейсе. Мы рассмотрели вызовы RESTful API, GraphQL и WebSockets как популярные методы достижения этой цели. Используя эти методы, вы можете с легкостью создавать динамические и интерактивные веб-приложения.

Удачного программирования!