Docs_Data Fethcing(Client Side)

Client-side data fetching

클라이언트 사이드 데이터 가져오기는 페이지가 SEO 인덱싱이 필요하지 않거나 데이터를 사전 렌더링할 필요가 없거나 페이지 내용이 자주 업데이트 되어야 할 때 유용하다. 서버 측 렌더링 API와 달리, 컴포넌트 수준에서 클라이언트 측 데이터 가져오기를 사용할 수 있다.

페이지 수준에서 수행하면 데이터는 런타임에 가져와 페이지 내용이 데이터가 변경될 때마다 업데이트된다. 컴포넌트 수준에서 사용하면 데이터는 컴포넌트 마운트 시점에 가져와 컴포넌트 내용이 데이터가 변경될 때마다 업데이트된다.

하지만 클라이언트 측 데이터 가져오기는 애플리케이션의 성능과 페이지 로드 속도에 영향을 미칠 수 있다. 이는 데이터 가져오기가 컴포넌트나 페이지 마운트 시점에 수행되며 데이터가 캐시되지 않기 때문이다.

 

Client-side data fetching with useEffect

다음예시는 client-side에서 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>
  )
}