압축(compress) 알아보기
Next.js에서는 기본적으로 next start 명령어나 커스텀 서버를 사용할 때 렌더된 콘텐츠와 정적 파일에 gzip 압축을 자동으로 적용해줘요. 이건 압축 설정이 따로 되어 있지 않은 애플리케이션을 위한 최적화 기능이라 보면 돼요. 만약 여러분이 이미 커스텀 서버에서 압축을 설정해놨다면, Next.js는 중복으로 압축을 추가하지 않습니다.
참고할 점:
Vercel에 애플리케이션을 호스팅하면 압축 방식이 먼저 brotli를 사용하고 그 다음에 gzip 방식을 사용해요. 이 두 가지는 모두 흔히 쓰이는 웹 압축 알고리즘이고, brotli가 최신 방식이라 더 효율적인 경우가 많답니다.
내 사이트가 압축을 제대로 적용하고 있는지, 그리고 어떤 알고리즘을 쓰는지는 브라우저가 서버에 보내는
Accept-Encoding헤더와, 서버가 실제로 응답하는Content-Encoding헤더를 보면 확인할 수 있어요.
압축 비활성화하기
Next.js에서 기본 압축 기능을 끄고 싶을 때가 있죠? 예를 들어, 이미 서버 레벨에서 압축을 관리하거나, 특정 환경에서 이 기능을 조절해야 할 때요. 이럴 땐 어떻게 해야 할까요?
Next.js 공식 문서에 따르면, 커스텀 서버를 쓰는 경우에만 압축 설정을 직접 조절할 수 있습니다. 기본 next start 명령어 사용 시에는 압축을 끄는 옵션이 따로 없으니, 서버 레벨에서 하는 쪽이 좋습니다.
조금 더 알려드리는 팁!
-
서버에서 직접 압축 설정을 관리하고 싶다면?
Express.js 같은 커스텀 서버를 쓰면서compression미들웨어를 직접 설치하고 설정할 수 있어요. 이 경우 Next.js는 기본 압축을 넣지 않으니, 내가 원하는 방식과 수준으로 압축을 제어할 수 있죠. -
왜 압축이 중요할까?
압축은 네트워크 대역폭을 아껴주고 페이지 로딩 속도를 크게 개선해줍니다. 특히 이미지나 스크립트, CSS 같은 정적 파일에는 gzip이나 brotli 압축이 필수라고 할 만큼 효과가 크죠. -
brotli와 gzip 차이는?
브라우저 지원이 점점 좋아지고 있는 brotli는 gzip보다 더 높은 압축률을 보여 줍니다. Vercel이 brotli를 먼저 사용하는 이유기도 하고요. 다만, 모든 브라우저가 빠르게 brotli를 지원하지 않을 때 fallback으로 gzip을 쓰면서 호환성을 챙기죠.
압축 설정은 사용 환경과 요구사항에 따라 다르게 적용해야 하니까, 내 애플리케이션에 맞는 최적화를 고민해보세요!
압축 기능을 끄고 싶다면, compress 설정 옵션을 false로 지정하면 돼요:
module.exports = {
compress: false,
}
그런데, 압축 기능을 끄는 건 추천하지 않아요! 왜냐하면 압축은 네트워크 대역폭을 줄여주고 애플리케이션 성능을 올려주거든요. 만약 이미 서버 쪽에서 별도의 압축 설정을 해두었다면 그때는 꺼도 괜찮아요.
압축 알고리즘 변경하기
기본 압축 알고리즘 외에 다른 알고리즘을 쓰고 싶을 때가 있죠? 압축 알고리즘을 변경하면 성능이나 압축률에 차이가 생길 수 있어요. 다음엔 어떻게 바꾸는지 간단하게 알아볼게요!
압축 알고리즘을 바꾸고 싶을 때는, 직접 커스텀 서버를 구성하고 next.config.js 파일에서 compress 옵션을 false로 설정해줘야 해요.
예를 들어, nginx를 사용하고 있고 Brotli 압축으로 바꾸려고 한다면, compress 옵션을 false로 해서 Next.js가 아닌 nginx가 압축을 담당하도록 설정하는 거죠.
참고로 알아두면 좋은 점: Next.js 애플리케이션을 Vercel에서 운영할 경우에는, 압축 처리는 Next.js가 아니라 Vercel의 Edge Network에서 해줍니다. 따라서
compress옵션을 조절하지 않아도 괜찮아요. 자세한 내용은 Vercel 공식 문서를 참고해 보세요.
사실 요즘은 서버에서 압축을 어떻게 처리하느냐에 따라 성능 차이가 꽤 크기 때문에, 직접 제어할 수 있는 환경이라면 Brotli 같은 최신 압축 방식을 적용하는 게 웹사이트 속도 향상에 도움이 됩니다. 그리고 nginx에는 brotli 모듈을 설치하고 설정하는 것도 잊지 마세요!