В Next.js функция GetServerSidedPropsпозволяет получать данные из запроса API и передавать их в качестве реквизита на страницу во время рендеринга на стороне сервера. Эта мощная функция позволяет предварительно визуализировать динамический контент на сервере перед его отправкой клиенту. В этой статье мы рассмотрим несколько методов использования GetServerSidedPropsдля получения данных из запроса API и предоставим примеры кода для каждого метода.

Метод 1: получение данных с помощью модуля Node.js http

import http from 'http';
export async function getServerSideProps() {
  const options = {
    hostname: 'api.example.com',
    path: '/data',
    method: 'GET',
  };
  return new Promise((resolve, reject) => {
    const req = http.request(options, (res) => {
      let data = '';
      res.on('data', (chunk) => {
        data += chunk;
      });
      res.on('end', () => {
        resolve({ props: { data: JSON.parse(data) } });
      });
    });
    req.on('error', (error) => {
      reject(error);
    });
    req.end();
  });
}

Метод 2: получение данных с использованием axios

import axios from 'axios';
export async function getServerSideProps() {
  const response = await axios.get('https://api.example.com/data');
  return {
    props: {
      data: response.data,
    },
  };
}

Метод 3. Получение данных с использованием fetch

export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return {
    props: {
      data,
    },
  };
}

Метод 4: получение данных с помощью Next.js getServerSidePropsс axios

import axios from 'axios';
export async function getServerSideProps() {
  const response = await axios.get('https://api.example.com/data');
  const data = response.data;
  return {
    props: {
      data,
    },
  };
}

В этой статье мы рассмотрели несколько методов получения данных из запроса API с использованием GetServerSidedPropsв Next.js. Вы можете выбрать метод, который соответствует требованиям вашего проекта и предпочтениям в кодировании. Использование рендеринга на стороне сервера с помощью Next.js позволяет оптимизировать производительность вашего веб-сайта и эффективно доставлять динамический контент.