Next js API 데이터 가져오기

nab5m·2023년 11월 4일

Next js 공홈 뽀개기

목록 보기

2/7

API 호출로 데이터를 가져오는 방법

서버 사이드에서 fetch 사용
서버 사이드에서 써드 파티 라이브러리 사용
클라이언트 사이드에서 Route Handler 사용
클라이언트 사이드에서 써드 파티 라이브러리 사용

1번과 2번은 next에서 api를 구현하는 것이 아니라면 몰라도 괜찮은 내용이라고 생각합니다.

1. 서버 사이드에서 fetch 사용

async function getData() {
	const response = await fetch('https://api.example.com/...');
    
    if (!response.ok) {
 		throw new Error('Failed to fetch data')   
    }
    
    return response.json()
}

export default async function Page() {
	const data = await getData()
    
    return <main></main>
}

Next js는 web에서 사용하는 fetch api를 확장해서 캐싱, revalidating(검증 및 최신화) 기능을 제공합니다. 또한 React에서는 fetch를 확장해서 memorize 기능을 제공합니다.

memorize

만약 같은 url에 같은 데이터로 fetch 메써드를 여러 곳에서 호출한 경우 실제 네트워크 요청은 1번만 실행되고 memorize한 결과 값을 공유하게 됩니다. 여러 컴포넌트에서 하나의 api 결과 값을 사용해야한다고 하면 상위 컴포넌트에서 api를 호출해서 이 결과 값을 props로 넘겨주거나 전역 store를 통해서 공유하고는 했습니다. 하지만 memorize를 활용하면 데이터를 필요로 하는 여러 컴포넌트에서 fetch를 직접 수행하더라도 성능을 걱정할 필요가 없어졌습니다.

주의사항

Router Handler에서 수행한 fetch 요청은 리액트 컴포넌트 트리의 일부가 아니기 때문에 memorize 되지 않습니다

캐싱

기본적으로 Next는 fetch된 값을 서버의 Data cache에 저장해둡니다. POST 메써드로 요청한 것도 자동으로 캐싱되지만 Route Handler에서 호출한 것이 아니면 캐싱되지 않습니다.

주의사항

공식 홈페이지를 보면서 이해한 바로는 Next 서버에 들어오는 요청에 대해서 캐시를 활용하는 것으로 봤습니다. 잘못된 정보인 경우 댓글로 남겨주세요! 즉, 외부 서비스 api 호출에 대한 캐시가 아니라 Next에 구현한 api 호출에 대한 응답을 캐싱한 것입니다.

Revalidating

Revalidating은 캐시된 데이터를 삭제하고 최신의 데이터를 가져오는 것을 말합니다.

시간 단위로 최신 데이터를 가져오는 방법이 있고 이는 데이터가 자주 변경되지 않고 과거의 데이터를 보여주는 것이 치명적이지 않을 때 유용하게 사용할 수 있습니다.

fetch('https://...', { next: { revalidate: 3600 } })

fetch api에 옵션으로 넘겨주는 방법과

export const revalidate = 3600 // revalidate at most every hour

layout이나 page파일에서 Segment Config Options 변수로 설정하는 방법이 있습니다.

또한 이벤트 기반으로 필요할 때 최신 데이터로 갱신하는 방법이 있습니다.

export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } })
  const data = await res.json()
  // ...
}

fetch를 호출할 때 tag를 설정해두고

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function action() {
  revalidateTag('collection')
}

데이터를 업데이트하는 곳에서 revalidateTag를 호출하면 캐시를 최신화할 수 있습니다.

만약 revalidate 과정에서 에러가 발생한 경우 기존에 가지고 있던 캐시 값을 유지합니다.

Authorization이나 Cookie 헤더를 사용하는 경우 캐싱되지 않는다고 합니다.

The fetch request uses Authorization or Cookie headers and there's an uncached request above it in the component tree.

2. 서버 사이드에서 써드 파티 라이브러리 사용

fetch api를 사용하지 않고 database, CMS, ORM client와 같은 써드 파티 라이브러리를 사용할 경우입니다. 캐싱과 Revalidating과 같은 기능을 사용하려면 Route Segment Config Option과 리액트의 cache 함수를 사용할 수 있습니다.