Использование с Next.js

App Router

Серверные компоненты

✅

В Next.js App Router по умолчанию все компоненты являются React Server Components (RSC). Вы можете импортировать только ключевые API сериализации из SWR в RSC.

app/page.tsx

import { unstable_serialize } from 'swr' // ✅ Доступно в серверных компонентах
import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ Доступно в серверных компонентах

🚫

Вы не можете импортировать другие API из SWR, так как они не доступны в RSC.

app/page.tsx

import useSWR from 'swr' // ❌ Недоступно в серверных компонентах

Клиентские компоненты

Вы можете пометить свои компоненты директивой 'use client' или импортировать SWR из клиентских компонентов. Оба способа позволят вам использовать хуки получения данных SWR на стороне клиента.

app/page.tsx

'use client'
import useSWR from 'swr'
export default Page() {
  const { data } = useSWR('/api/user', fetcher)
  return <h1>{data.name}</h1>
}

Если вам необходимо использовать SWRConfig для настройки глобальных параметров в компонентах сервера, таких как layout или page, создайте отдельный клиентский компонент-провайдер для настройки провайдера и конфигурации, а затем используйте его на страницах серверных компонентов.

app/swr-provider.tsx

'use client';
import { SWRConfig } from 'swr'
export const SWRProvider = ({ children }) => {
  return <SWRConfig>{children}</SWRConfig>
};

app/page.tsx

// Это всё ещё серверный компонент
import { SWRProvider } from './swr-provider'
export default Page() {
  return (
    <SWRProvider>
      <h1>hello SWR</h1>
    </SWRProvider>
  )
}

Получение данных на стороне клиента

Если ваша страница содержит часто обновляемые данные, и вам не нужно предварительно рендерить данные, то SWR идеально подходит, и специальная настройка не требуется: просто импортируйте useSWR и используйте этот хук внутри любых компонентов, которые используют эти данные.

Вот как это работает:

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

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

Предварительный рендеринг с данными по умолчанию

Если страница должна быть предварительно отрендерена, Next.js поддерживает 2 формы предварительного рендеринга (opens in a new tab): Static Generation (SSG) и Server-side Rendering (SSR).

Совместно с SWR вы можете предварительно отрендерить страницу для SEO, а также использовать функции, такие как кэширование, ревалидация, отслеживание фокуса, повторное получение данных через интервал на стороне клиента.

Вы можете использовать параметр fallback в SWRConfig, чтобы передать предварительно полученные данные в качестве начального значения для всех хуков SWR.

Например, с использованием getStaticProps:

 export async function getStaticProps () {
  // `getStaticProps` выполняется на стороне сервера.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}
 
function Article() {
  // `data` всегда будет доступна, так как она находится в `fallback`.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  // Хуки SWR внутри области `SWRConfig` будут использовать эти значения.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

Страница всё ещё предварительно рендерится. Она дружественна к SEO, быстро реагирует, но также полностью поддерживается SWR на стороне клиента. Данные могут быть динамичными и автоматически обновляться со временем.

💡

Компонент Article сначала отобразит предварительно сгенерированные данные, после гидратации страницы снова запросит последние данные, чтобы обновить их.

Комплексные ключи

useSWR можно использовать с ключами типов array и function. Для использования предварительно полученных данных с этими типами ключей необходимо сериализовать ключи fallback с помощью unstable_serialize.

import useSWR, { unstable_serialize } from 'swr'
 
export async function getStaticProps () {
  const article = await getArticleFromAPI(1)
  return {
    props: {
      fallback: {
        // ключ в виде массива с использованием unstable_serialize()
        [unstable_serialize(['api', 'article', 1])]: article,
      }
    }
  }
}
 
function Article() {
  // использование ключа в виде массива.
  const { data } = useSWR(['api', 'article', 1], fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

Пред-выборка TypeScript