Next.js에서 Cache 전략 적용하기

Soly; 독특하게·2024년 7월 1일
0

Next.js

목록 보기
4/7

Intro.

사내 서비스 내에 광고 플랫폼 팀으로 옮겨지면서 유저에게 주어야 하는 것이 무엇인지 고민하고자 스터디를 진행했다.

서비스 내에 광고를 효과적으로 녹여내기 위해서는 사용자에게 최적화된 첫 렌더링 화면을 제공하는 것이 중요하다고 생각한다. 광고주들은 사용자에게 광고가 얼마나 많이 노출되었는지에 따라 금액을 측정하기 때문에, 광고가 매끄럽게 노출되도록 최적화 해야 할 필요가 있다고 생각했다.

광고 마케팅으로 유입되는 유저들로 인해 트래픽이 몰릴 때, 비로그인 상태에서도 조회 가능한 페이지들은 캐싱을 통해 효율적으로 관리할 수 있어야 하는 것을 첫번째로 생각했다. Next.js 를 사용하기 때문에 캐싱 전략을 적절히 적용하면 페이지 로드 시간을 줄이고, 페이지 전환 시 데이터를 신속하게 제공하면 사용자 만족도를 높일 수 있는 방향이라 생각한다.

다음은 스터디 하면서 캐싱에 필요한 부분들을 정리했다.

Request Memoization

Request Memoization은 동일한 API 호출을 여러 번 하지 않도록 요청을 메모이제이션 하는 방법입니다. 이는 주로 서버에서 호출되는 GET 메서드에만 적용되며, POST, DELETE API 또는 클라이언트에서 호출되는 API에는 적용되지 않습니다. Request Memoization은 한 번의 서버 렌더링 동안만 유효하므로 따로 revalidate 할 필요가 없고, 할 수도 없습니다.

Data Cache

Data Cache는 API 응답을 캐싱하여 성능을 최적화합니다. 그러나 revalidate 시간이 지나더라도 첫 요청은 캐싱된 값을 반환하므로, STALE 상태여도 백그라운드에서 API를 호출해 값을 업데이트합니다. 이는 개발자 의도와 다르게 동작할 수 있으므로 캐시 적용 시 주의가 필요합니다.

Full Route Cache

웹 서버의 성능을 눈에 띄게 향상시키기 위해 Full Route Cache를 적용해야 합니다. 서버 렌더링 과정에서 웹 서버의 리소스를 많이 사용하므로, Full Route Cache는 서버 렌더링 결과를 재사용해 이를 줄일 수 있습니다.

  • 페이지를 Static 렌더링 되도록 구성
  • Dynamic Function 사용 금지: 그렇지 않으면 Full Route Cache 단계가 SKIP 됩니다.

참고자료 ) Next.js의 Full Route Cache

Next.js의 캐싱 적용

Next.js에서는 특정 조건에 따라 SSR, SSG, ISR 등의 캐싱 방법을 선택할 수 있습니다. 개인화된 페이지는 캐싱 대상에서 제외하지만, 비로그인 상태에서도 조회 가능하고 트래픽이 몰릴 가능성이 있는 페이지는 적절한 캐싱 대상입니다.

SSR (Server-Side Rendering)

사용자가 요청할 때마다 페이지를 새롭게 렌더링합니다. Fetching 해야 하는 데이터가 빈번하게 변경될 때 사용됩니다. → getServerSideProps

SSG (Static Site Generation)

빌드 시에 페이지를 미리 생성해놓는 방식입니다. 빌드 시점 이후 데이터를 변경하려면 다시 빌드해야 합니다. → getStaticProps

ISR (Incremental Static Regeneration)

빌드 시점에 페이지를 렌더링 한 후, 설정한 시간마다 페이지를 새로 렌더링합니다. SSG의 연장선으로 볼 수 있으며, 일정 시간마다 페이지를 업데이트합니다.

참고자료 ) Next.js SSG, SSR, ISR

결국, ISR 적용

현재 사내 서비스에는 SSR이 부분적으로 적용되어 있었다. 대부분의 페이지가 SSR 이 적용되어 있다고 하나, 네트워크 탭을 보았을때 흰 화면이만이 노출되는 것으로 보아 비로그인 상태에서 잘 보여야 하는 부분들은 고려되지 못하고 있는 것으로 파악되었다. 따라서, ISR 이 적용되어야 하는 페이지와 SSR 이 적용되어야 하는 페이지들을 선별하는 작업이 우선적으로 되어야 함을 깨달았다.
우선, 광고가 보일 부분만이라도 (사실 비로그인시 보여야 하는 화면들) ISR 을 적용해 보기로 했다.

ISR은 Hydration과 데이터 최신화를 위해 SSG와 CSR의 형태로 서비스를 제공합니다. Next.js는 SSG와 SSR의 하이브리드 형태인 ISR을 제공하며, 빌드된 SSG 파일들은 새로 빌드되지 않는 한 수정/삭제가 되지 않는 문제를 해결합니다.

기대효과

ISR을 적용하면 CLS가 개선될 것입니다. 이는 revalidation이 적용된 이후에만 해당합니다.

  • LCP (Largest Contentful Paint): 웹 페이지에서 가장 큰 콘텐츠 요소가 화면에 표시되는 시점을 측정하는 지표
  • CLS (Cumulative Layout Shift): 웹 페이지의 레이아웃 안정성을 측정하는 지표로, 예상치 못한 레이아웃 이동을 측정합니다.

ISR 적용 방식

  • StaticProps + Revalidation 또는 On-demand Revalidation
  • Dynamic Routing을 적용하는 페이지라면, getStaticPath의 fallback option을 true/blocking으로 설정해야 합니다.

참고자료 ) Next.js의 Dynamic Function

아뿔싸! Next Action

_app.tsx → getInitialProps

특정 page 에서 → getStaticProps

⇒ 동시에 할 수 없음 따라서 ISR 을 신경쓴 프로젝트를 따로 구축하기로 함

ISR 를 신경쓴 프로젝트에서 충분히 시도한 후 getInitialProps 를 대체하여 부분적으로 ISR 을 적용하는 방향으로 가려 한다.

적용한 프로젝트 build 예시

Next.js는 상황에 따라 맞는 렌더링 방식을 선택하도록 하나, SSR이 꼭 필요한 상황이 아니라면 SSR 방식보다는 SSG 방식을 권장하고 있습니다.

참고: Basic Features: Pages | Next.js

profile
협업을 즐겨하는 목표지향적인, Front-End 개발자입니다.

0개의 댓글