Получение данных на стороне клиента (Client-side Fetching)

Получение данных на стороне клиента полезно, когда ваша страница не требует индексации для SEO, когда вам не нужно предварительно рендерить данные или когда содержимое страниц должно часто обновляться. В отличие от API для рендеринга на стороне сервера (SSR), вы можете использовать клиентское получение данных на уровне компонентов.

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

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

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

В следующем примере показано, как можно получать данные на стороне клиента с использованием хука useEffect.

import { useState, useEffect } from 'react'

function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])

  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

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

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

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

Для получения дополнительной информации об использовании SWR ознакомьтесь с документацией SWR.

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}