Получение данных во время запроса

Если вам нужно получать данные во время запроса, а не во время сборки, вы можете использовать Рендеринг на стороне сервера (SSR):

Для использования Рендеринга на стороне сервера (SSR) вам нужно экспортировать getServerSideProps вместо getStaticProps из вашей страницы.

Использование getServerSideProps

Вот начальный код для getServerSideProps. Для нашего примера с блогом он не требуется, поэтому мы не будем его реализовывать.

export async function getServerSideProps(context) {
  return {
    props: {
      // пропсы для вашего компонента
    },
  };
}

Поскольку getServerSideProps вызывается во время запроса, его параметр (context) содержит специфичные для запроса параметры.

Используйте getServerSideProps только если вам нужно предварительно отрендерить страницу, данные для которой должны быть получены во время запроса. Время до первого байта (TTFB) будет медленнее, чем при использовании getStaticProps, потому что сервер должен вычислять результат при каждом запросе, и результат не может быть закэширован CDN без дополнительной настройки.

Рендеринг на стороне клиента (CSR)

Если вам не нужно предварительно рендерить данные, вы также можете использовать следующую стратегию (называемую Рендерингом на стороне клиента (CSR)):

• Статически сгенерируйте (предварительно отрендерите) части страницы, которые не требуют внешних данных.
• Когда страница загрузится, получите внешние данные с клиента с помощью JavaScript и заполните оставшиеся части.

Этот подход хорошо подходит, например, для страниц пользовательских дашбордов. Поскольку дашборд — это приватная, пользовательская страница, SEO не имеет значения, и страница не нуждается в предварительном рендеринге. Данные часто обновляются, что требует получения данных во время запроса.

SWR

Команда Next.js создала React-хук для получения данных под названием SWR. Мы настоятельно рекомендуем его, если вы получаете данные на стороне клиента. Он обрабатывает кэширование, ревалидацию, отслеживание фокуса, повторные запросы по интервалу и многое другое. Мы не будем вдаваться в подробности, но вот пример использования:

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>Ошибка загрузки</div>;
  if (!data) return <div>Загрузка...</div>;
  return <div>Привет, {data.name}!</div>;
}

Ознакомьтесь с документацией SWR, чтобы узнать больше.

Это всё!

В следующем уроке мы создадим страницы для каждого поста блога с использованием динамических маршрутов.

Опять же, вы можете получить подробную информацию о getStaticProps и getServerSideProps в документации по получению данных.