[Next.js] Next.js 14 Server Side Data Fetching

Next.js 14 Server Side Data Fetching

 

서버 컴포넌트에 데이터를 fetch할 함수를 작성한다.

getMovies 코드

// 영화 목록 불러오는 함수 (서버사이드렌더링)
async function getMovies() {
  const response = await fetch(API_URL);
  return response.json();
}

 

컴포넌트 코드

export default async function Home() {
  const movies = await getMovies();
  return (
    <div className={style.container}>
      {movies.map((movie: any) => (
        <Movie key={movie.id} id={movie.id} poster_path={movie.poster_path} title={movie.title} />
      ))}
    </div>
  );
}

 

여기서 주의해야할 점은 무조건 서버 컴포넌트 함수를 async await으로 해야한다.

 

또한 서버사이드로 불러온 데이터는 캐싱이 되어 처음 한 번만 불러오면 된다.

 

그러면 최신 업데이트된 데이터를 가져오려면 어떻게 해야할까?

 

revaildate(재검증)를 사용하면 된다.

 

revaildate(재검증)이란?

재검증은 데이터 캐시를 제거하고 최신 데이터를 다시 가져오는 프로세스, 이는 데이터가 변경되어 최신 정보를 표시하려는 경우에 유용하다.

 

검증 방법에는 시간 기반 재검증과 주문형 재검증이 있다.

 

시간 기반 재검증 : 일정 시간이 지나면 데이터를 자동으로 재검증한다. 자주 변경되지 않고 최신성이 중요하지 않은 데이터에 유용

 

코드

const response = await fetch(API_URL, { next: { revalidate: 10} }); // In seconds

10초마다 최신 업데이트된 데이터를 불러온다.

 

주문형 재검증 : 이벤트(예: 양식 제출)를 기반으로 데이터를 수동으로 재검증한다. 주문형 재검증에서는 태그 기반 또는 경로 기반 접근 방식을 사용하여 데이터 그룹을 한 번에 재검증할 수 있다. 가능한 한 빨리 최신 데이터를 표시하려는 경우에 유용(예: 헤드리스 CMS의 콘텐츠가 업데이트되는 경우).

 

코드

const response = await fetch(API_URL,  { next: { tags: ['collection'] } });

 

'collection' 캐시 태그 추가

 

그 후 서버 작업을 호출하여 fetch태그가 지정된 이 호출을 다시 검증할 수 있다.

 

actions.ts

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

 

주문형 재검증에 대해서는 더 공부를 해야할 것 같다.

 

 

참고1 : https://nomadcoders.co/nextjs-for-beginners/lectures/4705

All Courses – 노마드 코더 Nomad Coders

 

참고2 : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating