Next.js의 SSR & 캐싱 전략

• Next.js는 서버 사이드 렌더링(SSR)을 통해 데이터 페칭, 보안, 캐싱, 성능, 초기 페이지 로드, SEO, 스트리밍 등에서 장점을 제공하며, SSG, ISR, SSR의 세 가지 방식으로 서버 렌더링 전략을 취한다. App Router를 통해 컴포넌트 단위로 성능 최적화를 가능하게 하며, Hydration 과정을 통해 서버에서 렌더링된 HTML을 클라이언트 측에서 리액트 컴포넌트로 변환한다.

• Next.js의 캐싱 전략은 사용되는 API에 따라 자동으로 결정되며, SSG와 ISR은 CDN에서의 정적 페이지 캐싱을, SSR은 캐싱 서버와 HTTP 캐싱을 활용하여 최상의 성능을 발휘하도록 기본값이 설정되어 있다.

• Next.js와 React의 새로운 기능들로 인해 캐싱 전략이 세분화되었으며, 서버와 클라이언트에서 각각 다른 메커니즘을 통해 API 요청의 반환 값을 캐싱하고, 동일한 요청이 여러 번 발생할 때 메모이제이션을 통해 효율적으로 처리한다. 서버 컴포넌트에서는 데이터를 props로 넘길 필요가 없으며, 렌더링이 완료되면 메모리는 초기화된다.

• HTML과 RSC Payload를 캐싱하는 메커니즘은 빌드 시 자동으로 경로를 렌더링하여 결과를 Next.js 서버의 파일 시스템에 저장하며, ETag를 사용해 백그라운드에서 캐시 유효성을 검사한다. 유효기간 내 요청 시 브라우저는 서버 요청 없이 캐시를 사용하고, 유효기간이 지난 경우 ETag를 포함한 조건부 요청을 보낸다.