Client-side Fetching

클라이언트 사이드 데이터 페칭은 페이지가 SEO 인덱싱을 필요로 하지 않거나, 데이터를 미리 렌더링할 필요가 없거나, 페이지의 내용이 자주 업데이트되어야 할 때 유용합니다. 서버 사이드 렌더링 API들과 달리, 클라이언트 사이드 데이터 페칭은 컴포넌트 레벨에서 사용할 수 있습니다.

페이지 레벨에서 데이터 페칭을 하면, 데이터는 런타임에 페칭되며, 페이지의 내용은 데이터 변경에 따라 업데이트됩니다. 컴포넌트 레벨에서 데이터 페칭을 하면, 데이터는 컴포넌트가 마운트 시점에 페칭되며, 컴포넌트의 내용은 데이터 변경에 따라 업데이트됩니다.

클라이언트 사이드 데이터 페칭은 어플리케이션의 성능과 페이지 로딩 속도에 영향을 줄 수 있다는 점을 인지하는 것이 중요합니다. 이는 데이터 페칭이 컴포넌트나 페이지 마운트 시점에 실행되며, 데이터가 캐시되지 않기 때문입니다.

Client-side data fetching with useEffect

다음 예시는 useEffect hook을 사용해 클라이언트 사이드에서 데이터를 페칭하는 방법을 보여줍니다.

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>
  )
}

Client-side data fetching with SWR

Next.js 팀은 SWR (opens in a new tab)이라는 데이터 페칭 React hook 라이브러리를 만들었습니다. 이 라이브러리는 클라이언트 사이드에서 데이터를 페칭한다면 강력하게 권장됩니다. SWR은 캐싱, revalidation, 포커스 추적, 주기적 refetch 등을 처리합니다.

위와 동일한 예제를 사용하여, 이제 SWR을 이용해 프로필 데이터를 페칭할 수 있습니다. SWR은 데이터를 자동으로 캐싱하고, 데이터가 더 이상 유효하지 않을 경우 revalidate합니다.

SWR 사용에 대핸 자세한 내용은 SWR 문서 (opens in a new tab)를 참고하세요.

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>
  )
}

Incremental Static Regeneration Styling