Next Client side

클라이언트 측 데이터 가져오기는 페이지에 SEO 인덱싱이 필요하지 않거나 데이터를 미리 렌더링할 필요가 없거나 페이지 콘텐츠를 자주 업데이트해야 할 때 유용합니다.

특징

• 페이지에서 수행하면 런타임에 데이터를 가져오고 데이터가 변경되면 페이지 내용이 업데이트됩니다.
• 컴포넌트에서 사용하는 경우 컴포넌트 마운트 시 데이터를 가져오고 데이터가 변경되면 컴포넌트의 내용이 업데이트됩니다.

useEffect로 클라이언트 데이터 가져오기

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

Next - 공식 홈페이지 Client-side data fetching