문제 배경!!

랜딩 페이지에서 api 요청을 하는 경우는 두 가지가 있습니다.

1. 현재 참가한 유저 수 받아오기
2. 테스트 시작하기 버튼을 클릭했을 때, token 생성하기

이때 첫번 째 API에서 부하가 많이 걸린다고 판단했습니다. 단순 DB에 적재된 유저수를 뽑아오는 것이지만, 해당 로직을 모든 유저가 접근할 때마다 새롭게 데이터를 갱신해서 보여주어야 하는 문제가 있었습니다.

이를 해결하기 위해서 Next.js에서 해당 유저수를 caching해서 일정 주기로 데이터를 요청하도록 구성하고 싶었습니다. 이를 위해서 ISR(Incremental Static Regeneration) 방식의 렌더링을 활용했습니다. ISR은 렌더링 하는 주체자가 서버인데, 주기적으로 렌더링 하는 것을 의미합니다. 개발자가 설정한 주기만큼 다시 사이트를 만듭니다. 따라서 5분 동안 있었던 변경 사항을 반영하여 다시 페이지를 생성합니다.

이를 통해서 불필요하게 매번 해당 페이지에 접근할 때마다 데이터를 fetching 하도록 하지 않고 일정 주기 별로 데이터를 업데이트 해서 페이지의 랜딩 속도를 향상 시켰습니다. 해당 방식을 적용하기 위해서 공식 문서를 참고했습니다.

Data Fetching: Fetching, Caching, and Revalidating

활용 예시

1. ISR 작업이 필요한 페이지에 주기를 설정합니다. 주기는 export const revalidate = n 과 같은 형식으로 설정합니다.

   import getUserNumber from '@/api/serverApi';
   import Home from '@/components/layout/Home';
    
   export const revalidate = 1200;
    
   export default async function HomePage() {
     const userNumber = await getUserNumber();
     return <Home userNumber={userNumber} />;
   }

2. api 작업이 필요한 fetch 로직에 React 의 cache를 활용합니다. React 캐시 함수는 데이터 요청을기록하는 데 사용됩니다.

   'use server';
   import { cache } from 'react';
   import { END_POINT, SERVER_URL } from '@/api/url';
    
   async function getUserNumber() {
     try {
       const response = await fetch(`${SERVER_URL}${END_POINT.userNumber}`);
       const data: { number: number } = await response.json();
       return data.number;
     } catch {
       // Error 작업
     }
   }
    
   export default cache(getUserNumber);