Получение данных на стороне клиента (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 обратитесь к документации 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>
  )
}