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

Получение данных на стороне клиента полезно, когда ваш сайт не требует индексации 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 для получения данных под названием 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>
  )
}