다이나믹 라우트 페이지 정적 처리하기

  
    
  
  
    
  

export async function generateStaticParams() {
  const { results } = await get('/products?limit=100');
  return results.map((product) => ({ id: product.id.toStirng() }));
}

강의에서 generateStaticParams 를 통해 다이나믹 라우트 페이지들을 정적 렌더링 처리하는 법을 배웠다.
처음 듣는 내용이라 바로 이해는 안되어서 일단 다음 강의도 마저 들은 다음 오늘 다시 실습을 하면서 내용을 차근차근 다시 확인했다.

의문1 : limit=100으로 설정했을 때, 상품 수가 101개가 되면?

101번째 상품 페이지부터는 다시 다이나믹 렌더링 될 것이다. 이러면 일부 페이지만 정적 렌더링 장점을 잃을 것이다...

이번엔 간단하게 limit=100을 사용했지만 상품 수가 최대 limit을 초과한다면 while 문과 next 프로퍼티를 사용할 수도 있을 거에요.

강의에서 말씀해 주신 이 부분이 처음엔 응? 했지만 이 의문을 갖고 다시 들으니 바로 이해가 갔다.
API의 페이지네이션용 next 프로퍼티가 null이 될 때까지 반복 호출되도록 로직을 짜두면 limit=200 limit=300 같은 하드 코딩이 필요 없겠구나

아래는 AI가 알려준 사용 예시. 참고해서 응용해보면 될 것 같다.

  
    
  
  
    
  

let url = 'https://api.server.com/products?limit=100';
let allProducts = [];

while (url) {
  const res = await fetch(url);
  const data = await res.json();
  allProducts = allProducts.concat(data.results);
  url = data.next; // 다음 페이지 URL이 있으면 계속 반복, 없으면 끝!
}

추가로 알아보니까 API 에서 애초에 모든 id만 반환하는 엔드포인트를 제공해 주는 경우도 있다고 한다. 편하겠다...

의문2 : 빌드 시, 상품 개수가 30개였는데, 그 후 상품이 추가되면!?

별 다른 로직을 해두지 않으면 limit=100이든 next 프로퍼티로 전체 개수를 받아오게 해놨든, 어찌됐든 빌드 시 기준으로만 정적 렌더링 처리가 된다고 한다! 데이터가 추가되면 다시 빌드를 해 줄 필요가 있다.

하지만 수동 빌드는 귀찮다...
데이터가 추가되면 다시 빌드할 수 있는 방법...
정적 페이지를 갱신하는 방법...
이전 강의에서 배운 revalidate를 응용하면 될 것 같다!!

1. revalidate
   특정 시간마다 해당 정적 페이지의 유효 기간이 지나면 다음 사용자가 해당 페이지 접근할 때 새로 정적 페이지가 생성
   빌드 후 상품이 늘어나도 revalidate 주기 이후 해당 상품 상세 페이지에 누군가가 접근하면 정적 페이지도 자동 추가

2. revalidatePath
   상품이 등록될 때 해당 상품 상세 페이지 경로를 갱신 요청
   새로운 상품을 등록할 때마다 해당 페이지의 정적 생성 및 갱신이 이루어짐

정리하니 일반적인 상품 등록은 2번이 가장 좋은 것 같다