Давайте разберемся, как изменилась выборка данных в 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.
Пока, скоро увидимся.