Как в Next.js App Router организован data-fetching

1️⃣ Как кратко ответить

В Next.js App Router data-fetching организован через использование функций getServerSideProps, getStaticProps, и getStaticPaths, которые позволяют извлекать данные на сервере во время рендеринга страницы. Эти функции обеспечивают гибкость в выборе между серверным рендерингом, статической генерацией и динамическими маршрутами, что позволяет оптимизировать производительность и SEO.

2️⃣ Подробное объяснение темы

В Next.js App Router data-fetching — это процесс извлечения данных, необходимых для рендеринга страницы. Next.js предоставляет несколько встроенных методов для этого, которые позволяют разработчикам выбирать между различными стратегиями рендеринга: серверным рендерингом, статической генерацией и динамическими маршрутами.

Основные методы data-fetching

1. getServerSideProps

   • Назначение: Используется для серверного рендеринга. Эта функция вызывается на сервере при каждом запросе к странице.
   • Пример использования:

     export async function getServerSideProps(context) {
       // Извлечение данных из API или базы данных
       const res = await fetch(`https://api.example.com/data`);
       const data = await res.json();
     ​
       // Возвращаем данные как props для компонента страницы
       return { props: { data } };
     }
     

     • fetch: Выполняет HTTP-запрос к API для получения данных.
     • res.json(): Преобразует ответ в формат JSON.
     • return { props: { data } }: Возвращает данные как свойства для компонента страницы.

2. getStaticProps

   • Назначение: Используется для статической генерации страниц. Эта функция вызывается на этапе сборки проекта и позволяет извлекать данные, которые не изменяются часто.
   • Пример использования:

     export async function getStaticProps() {
       // Извлечение данных из API или базы данных
       const res = await fetch(`https://api.example.com/data`);
       const data = await res.json();
     ​
       // Возвращаем данные как props для компонента страницы
       return { props: { data } };
     }
     

     • fetch: Выполняет HTTP-запрос к API для получения данных.
     • res.json(): Преобразует ответ в формат JSON.
     • return { props: { data } }: Возвращает данные как свойства для компонента страницы.

3. getStaticPaths

   • Назначение: Используется вместе с getStaticProps для генерации динамических маршрутов. Эта функция определяет, какие страницы должны быть сгенерированы на этапе сборки.
   • Пример использования:

     export async function getStaticPaths() {
       // Извлечение списка маршрутов из API или базы данных
       const res = await fetch(`https://api.example.com/paths`);
       const paths = await res.json();
     ​
       // Возвращаем массив объектов с параметрами маршрутов
       return {
         paths: paths.map((path) => ({
           params: { id: path.id.toString() },
         })),
         fallback: false,
       };
     }
     

     • fetch: Выполняет HTTP-запрос к API для получения списка маршрутов.
     • paths.map: Преобразует список маршрутов в массив объектов с параметрами.
     • return { paths, fallback }: Возвращает массив маршрутов и указывает, как обрабатывать маршруты, которые не были сгенерированы на этапе сборки.

Зачем это нужно

Data-fetching в Next.js позволяет оптимизировать производительность и SEO, выбирая подходящий метод рендеринга в зависимости от требований приложения. Серверный рендеринг обеспечивает актуальность данных на каждой загрузке страницы, статическая генерация улучшает производительность за счет предварительного рендеринга страниц, а динамические маршруты позволяют гибко управлять контентом.

Применение

• Серверный рендеринг: Используется для страниц, где данные часто меняются и должны быть актуальными на момент запроса.
• Статическая генерация: Подходит для страниц с редко изменяющимся контентом, таких как блоги или документация.
• Динамические маршруты: Используются для страниц с параметрами, такими как профили пользователей или страницы товаров.

Эти методы позволяют разработчикам Next.js создавать высокопроизводительные и SEO-оптимизированные приложения, адаптированные под различные сценарии использования.