Next.js를 사용하여 빌드 시간과 런타임 모두에서 API 쿼리

16일차 Blogvent에 오신 것을 환영합니다!

Next.js에서는 빌드 시간과 런타임에 API를 호출할 수 있습니다. 여기에는 장단점이 있습니다!

빌드 시 API를 호출하면 빌드 시에만 데이터를 가져오므로 사용자가 사이트를 방문할 때 데이터가 로드될 때까지 기다릴 필요가 없습니다. 그것은 이미 거기에 있을 것이고, 페이지에 구워질 것입니다! 그러나 이는 콘텐츠를 업데이트하려면 빌드를 다시 실행해야 함을 의미합니다.

런타임에 API를 호출하면 페이지가 실행될 때 사용자가 쿼리할 때 데이터를 가져오는 것을 의미합니다! 때때로 사용자의 경험이 느려지지만 데이터는 항상 최신 상태로 유지됩니다.

이것이 어떻게 작동하는지 더 볼 수 있습니까?

물론! Here’s a demo I built 이를 더 설명하기 위해:



이 데모는 NASA Open APIs을 사용하여 사진을 가져옵니다.

왼쪽에는 해왕성의 이미지가 표시됩니다. 해당 이미지는 빌드 시 사이트로 가져왔습니다. 코드에서 내 페이지 구성 요소에서 Next.js 함수getStaticProps를 사용하여 API를 호출합니다.

export async function getStaticProps() {
  const res = await fetch(`https://images-api.nasa.gov/search?q=neptune`)
  const data = await res.json()

  let image = data.collection.items[0].links[0].href
  let info = data.collection.items[0].data[0]

  return {
    props: { image, info },
  }
}

이 함수에서는 API를 가져오고 반환된 첫 번째 이미지에 대한 이미지 및 정보 데이터를 가져온 다음 이를 페이지로 푸시합니다. You can see the full file here . 이 함수는 사이트가 구축될 때 한 번 호출되고 사이트가 다시 구축될 때까지 다시는 호출되지 않습니다.

오른쪽에는 이미지가 런타임에 가져옵니다. 페이지가 로드되고 구성 요소가 마운트되면 API를 가져옵니다. 입력에서 텍스트를 변경할 수 있으며 API에서 더 많은 데이터를 가져옵니다. 이것은 React 후크( useEffect 및 useState )를 사용하고 있습니다.

export function useQuery(passed) {
  let [planet, setPlanet] = useState(passed)

  useEffect(() => {
    let current = true
    fetch(`https://images-api.nasa.gov/search?q=${passed}`)
      .then((res) => res.json())
      .then((res) => {
        if (current) {
          setPlanet(res)
        }
      })
      .catch((error) => {
        console.log('error', error)
      })
    return () => {
      current = false
    }
  }, [planet])

  return planet
}

이 함수에서는 기본값(passed 변수)을 API에 전달합니다. 데이터를 가져오고 구성 요소가 여전히 마운트되고 최신 상태이면 해당 API의 응답 데이터로 상태 변수( planet )를 설정합니다. 사용자가 다른 쿼리를 전달할 때마다 API가 다시 호출됩니다. You can see how this is used in the whole file here .

우와!

알아요. 우주는 정말 멋집니다. 자바스크립트도 마찬가지입니다.

그러나 실제로 이것은 애플리케이션에서 빌드 시간과 런타임 코드를 모두 사용할 수 있는 방법에 대한 작은 예일 뿐입니다. 그것들을 어떻게 구조화하고 싶은지, 어떤 것은 빌드 시 한 번만 실행되도록 하고 어떤 것은 매번 사용자 측에서 실행되도록 하고 싶은지 생각해보세요.

데모를 다시 보려면 here is the site , here is the repo 선택한 Git 제공업체에 데모를 복제하고 Netlify에 즉시 배포할 수 있는 버튼이 있습니다.



다음 시간까지!