Next.js 6. Client-side data fetching

  클라이언트 측 데이터 가져오기 (Client-side data fetching)는 페이지에 SEO 인덱싱이 필요하지 않거나, 데이터를 사전 렌더링 할 필요가 없거나, 페이지 콘텐츠를 자주 업데이트해야 하는 경우에 유용하다. 서버 측 API와 달리 컴포넌트 수준에서 클라이언트 측 데이터 가져오기를 사용할 수 있다.

  페이지 수준에서 수행되는 경우 런타임에 데이터를 가져오고 데이터가 변경되면 페이지 콘텐츠가 업데이트된다. 컴포넌트 수준에서 사용하는 경우 컴포넌트가 마운트 될 때 데이터를 가져오고 컴포넌트의 내용은 데이터가 변경됨에 따라 업데이트된다.

  클라이언트 측 데이터 가져오기를 사용하면 애플리케이션의 성능과 페이지의 로드 속도에 영향을 미칠 수 있다는 점에 유의해야 한다. 이는 컴포넌트 또는 페이지가 마운트 될 대 데이터 가져오기가 수행되고 데이터가 캐시 되지 않기 때문이다.

 

 

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

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는 SWR이라는 데이터 가져오기를 위한 React hook 라이브러리를 만들었다. Next.js는 클라이언트 측에서 데이터를 가져오는 경우 이것을 적극 권장한다. 캐싱, 유효성 재검사, 포커스 추적, 일정 간격으로 가져오기 등을 처리한다.

  아래는 특정 데이터를 가져와야 하는 페이지에 대한 예시이다.

{
  "id" : 1,
  "name": "John",
  "age": 30
}

import useSWR from 'swr';

const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Profile({ id }) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)
  
  if (error) return <div>Failed to laod</div>
  if (!data) return <div>Laoding...</div>;
  
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  )
}

export async function getServerSideProps(context) {
  return {
    props: { id: context.params.id },
  }
}

export default Profile

  위의 코드에서 useSWR hook은 `/api/user/${id}` URL에서 데이터를 가져오는 데 사용된다. fetcher는 데이터를 가져오는 데 사용되는 함수이다. data는 가져온 데이터이며 error는 오류가 발생한 경우 해당 오류를 나타낸다. data와 error는 useSWR hook의 반환값으로 제공된다.

  getServerSideProps는 서버에서 실행되며, id 값을 가져와 Profile 컴포넌트에 전달한다. 이 컴포넌트는 useSWR hook을 사용하여 `/api/user/${id}` URL에서 데이터를 가져와 화면에 표시한다.

  이 예시에서는 getServerSideProps를 사용하여 데이터를 가져왔지만 getStaticProps와 함께 사용할 수도 있다.