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

В Next Js 13 появилось так много изменений и обновлений, что, с одной стороны, они удивительны, а с другой — сбивают с толку. Итак, давайте сегодня разберемся, как работает выборка данных в Next Js 13 Beta.

До сих пор мы извлекали данные, используя getStaticProps и getServerSideProps, но в следующих 13 случаях это стало очень просто. Вам просто нужно получить его в компонентах напрямую.

Получение данных

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

Согласно документам, выборка из серверных компонентов дает много преимуществ:

  • Доступ к серверным службам, таким как база данных и API, которые не работают на клиенте.
  • Храните ваши секретные ключи на сервере, чтобы они не утекли клиенту
  • Извлечение и рендеринг в одной среде
  • Кэширование ваших рендеров на сервере
  • Отправляйте меньше JavaScript в пакет.

Мы можем напрямую получать и использовать данные следующим образом:

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos');

  return res.json();
}

или мы можем сделать компоненты асинхронными и инициализировать выборку данных.

export default async function AccountPage() {
  const table = await getData();

  return (
    <ul>
      {table.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Next 13 сделал это очень легко и очень быстро.

В следующем посте я объясню вам разницу между выборкой данных в Next 12 и Next 13. Мы углубимся в выборку данных и изучим новый ключ use() в следующем шаге 13.

Пока, скоро увидимся.