Next.js - CSR, Client side data fetching

 

Data Fetching: Client side | Next.js

Data Fetching: Client side | Next.js

Client-side 데이터 패칭은 SEO 인덱싱이 필요 없는 페이지에서 유용합니다. 해당 상황의 경우에는 너의 data를 pre-render 할 필요도 없고, 페이지가 빈번히 업데이트되야 할 것입니다. 서버-사이드 렌더링 API 들과 다르게, 너는 컴포넌트 단계(level)에서 데이터를 패칭할 수 있습니다.

Client-side data fetching with 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>
  )
}