Next.js 프로젝트 메모리 사용량 확인

배경

최근에 내가 개발모드로 돌리고 있는 Next.js 서버의 메모리 사용량을 알고 싶었다. 

그래서 Next.js Root layout에 process.memoryUsage()를 이용하여 console 로 찍어 보았다.

 

코드

1초 간격으로 사용중인 메모리양이 찍히도록 했다. 

// app/layout.tsx


export default function RootLayout(){

   setInterval(() => {
    let memoryUsage = process.memoryUsage()

    let rss = Math.floor(memoryUsage.rss / 1024 / 1024) + 'MB'
    let heapTotal = Math.floor(memoryUsage.heapTotal / 1024 / 1024) + 'MB'
    let heapUsed = Math.floor(memoryUsage.heapUsed / 1024 / 1024) + 'MB'
    let external = Math.floor(memoryUsage.external / 1024 / 1024) + 'MB'
    let arrayBuffers = Math.floor(memoryUsage.arrayBuffers / 1024 / 1024) + 'MB'

    console.log('memoryUsage :', memoryUsage)
    
    // MB변환한 각 항목들
    console.log('rss:', rss)
    console.log('heapTotal:', heapTotal)
    console.log('heapUsed:', heapUsed)
    console.log('external:', external)
    console.log('arrayBuffers:', arrayBuffers)
  }, 1000)

	...
	return (
		...
	)	
}

 

위와 같이 코드 작성 후 npm run dev로 next dev 서버를 띄우고 설정한 localhost로 들어간 뒤 터미널을 확인하면 

다음과 같이 1초 간격으로 메모리 사용량이 찍힌다. 

 

바로찍은 memoryUsage는 단위가 byte여서 보기 불편하여

각 항목들을 MB(메가바이트)으로도 변경해서 찍어보았다.

 

RSS가 프로젝트 관련 사용중인 총 메모리 이다.

 

각 항목에 대해 간단히 요약하자면
heapTotal, heapUsed - V8엔진의 메모리 사용량
exteranl - V8엔진에 의해 관리되는 자바스크립트 Object에 엮어있는 C++ Object의 메모리 사용량
rss(Resident Set Size) - 이 프로세스가 기기 메모리에서 차지하는 메모리양이다. ( rss의 메모리 사용량은 heapTotal, heapUsed 등 을 포함한 전체 메모리 사용량이라고 보면 된다. )
arraybuffer - Node.js Buffer 를 포함한 ArrayBuffer 와 SharedArrayBuffer를 위해 할당된 메모리를 지칭한다. ( * arraybuffer 는 바이너리 데이터 다루기위해 존재하는 js 객체이다 )

 

 

각항목에 대해 더 자세히 알고 싶으면 https://nodejs.org/api/process.html#processmemoryusage 를 참고하면 될 것 같다. 

후기

직접 메모리 사용량을 확인하게 되는 좋은 기회였다. 

서버 자원이 빡빡하게 되어 메모리 사용량을 극한까지 생각하게 되는 경우 요긴한게 쓸 수 있을 것 같고 

메모리 누수가 일어 날 경우에도 확인용으로 쓸 수 있을 것 같다.