Как в next 13 передать с сервера на клиент кастомные данные?

Для передачи кастомных данных с сервера на клиент в Next.js 13 можно использовать несколько подходов, в зависимости от ваших требований и предпочтений.

1. Серверный рендеринг с использованием функции getServerSideProps.

Самый простой способ передачи кастомных данных с сервера на клиент - это использование функции getServerSideProps в вашем компоненте страницы. Эта функция выполняется на сервере при каждом запросе и позволяет получать данные, которые затем передаются в компонент страницы для рендеринга на стороне сервера. Возвращаемые данные можно использовать в компоненте для отображения содержимого, передачи пропсов и т.д.

Вот пример использования getServerSideProps:

export async function getServerSideProps() {
  // Ваш код для получения кастомных данных с сервера
  const data = await fetch('https://example.com/api/data');
  const customData = await data.json();

  return {
    props: {
      customData
    }
  };
}

function MyPage({ customData }) {
  // Ваш код для отображения полученных данных
  return (
    <div>
      <h1>Моя страница</h1>
      <p>Кастомные данные: {customData}</p>
    </div>
  );
}

export default MyPage;

2. Клиентский рендеринг с использованием функции getStaticProps.

Если ваши кастомные данные не зависят от конкретного запроса, их можно получить с использованием функции getStaticProps. Она выполняется только во время сборки и позволяет получить данные, которые затем будут встроены в статически сгенерированный HTML и доступны на клиенте.

Вот пример использования getStaticProps:

export async function getStaticProps() {
  // Ваш код для получения кастомных данных с сервера
  const data = await fetch('https://example.com/api/data');
  const customData = await data.json();

  return {
    props: {
      customData
    }
  };
}

function MyPage({ customData }) {
  // Ваш код для отображения полученных данных
  return (
    <div>
      <h1>Моя страница</h1>
      <p>Кастомные данные: {customData}</p>
    </div>
  );
}

export default MyPage;

3. Использование API вызовов.

Если вам необходимо получить кастомные данные на стороне клиента после инициализации страницы, вы можете использовать API вызовы. Next.js предоставляет встроенный механизм для создания API endpoints, которые можно вызвать с клиента для получения данных с сервера.

Вот пример создания API endpoint с помощью Next.js:

// pages/api/data.js
export default function handler(req, res) {
  // Ваш код для получения кастомных данных с сервера
  const customData = ...;

  res.status(200).json(customData);
}

// pages/index.js
import { useEffect, useState } from 'react';

function MyPage() {
  const [customData, setCustomData] = useState(null);

  useEffect(() => {
    // Вызываем API endpoint для получения кастомных данных
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setCustomData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Моя страница</h1>
      <p>Кастомные данные: {customData}</p>
    </div>
  );
}

export default MyPage;

Приведенные выше подходы позволят вам передавать кастомные данные с сервера на клиент в Next.js 13. В зависимости от вашего конкретного случая использования и требований, вам может потребоваться использовать один или несколько из этих подходов.