fetching: Client Side

클라이언트 측 데이터 가져오기

SEO 색인이 필요하지 않은 경우, 데이터를 사전 렌더링할 필요가 없는 경우 또는 페이지 내용을 자주 업데이트해야하는 경우 클라이언트 측 데이터 가져오기가 유용합니다.

서버 측 렌더링 API와 달리 클라이언트 측 데이터 가져오기는 컴포넌트 수준에서 사용할 수 있습니다.

페이지 수준에서 수행하면 데이터가 런타임에 검색되며 데이터가 변경되면 페이지 콘텐츠가 업데이트됩니다. 컴포넌트 수준에서 사용하면 데이터가 컴포넌트 마운트 시간에 검색되며 데이터가 변경될 때 컴포넌트 내용이 업데이트됩니다.

클라이언트 측 데이터 가져오기를 사용하면 응용 프로그램의 성능과 페이지 로드 속도에 영향을 미칠 수 있으므로 이 점을 유의해야 합니다. 이는 데이터 가져오기가 컴포넌트나 페이지 마운트 시간에 수행되며 데이터가 캐시되지 않기 때문입니다.

useEffect를 사용한 클라이언트 측 데이터 가져오기

다음 예제는 useEffect 훅을 사용하여 클라이언트 측에서 데이터를 가져오는 방법을 보여줍니다.

Copy code
import { useState, useEffect } from 'react'

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

  useEffect(() => {
    setLoading(true)
    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은 클라이언트 측에서 데이터를 가져오기 위한 Next.js에서 제공하는 React 훅 라이브러리입니다. 이를 사용하면 캐싱, 재검증, 포커스 추적, 일정 간격으로 다시 가져오기 등을 처리할 수 있습니다.

위의 예시와 동일한 경우, SWR을 사용하여 프로필 데이터를 가져올 수 있습니다. SWR은 데이터를 자동으로 캐시하며, 데이터가 더 이상 최신 상태가 아니면 다시 유효성을 검사합니다.

SWR 사용에 대한 자세한 내용은 SWR 문서를 참조하십시오. (https://swr.vercel.app/docs/getting-started)

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