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

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

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

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

Получение данных на стороне клиента с помощью 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 Hooks для получения данных под названием 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>
  )
}