Next.js 빌드 결과 분석해보기 ✨

Intro

Next.js 프로젝트를 본격 진행하기 전에
빌드 결과를 분석해보려고 한다.

create-next-app 을 사용하여 프로젝트를 만든 후
app 폴더구조를 사용한 정적 라우팅 설정까지만 하고 빌드를 진행해보았다.

빌드 전 dev 모드에서 테스트할 때는 라우트 이동할 때 약간의 지연이 있음을 확인하였다.
(서버사이드)

빌드결과

• app 폴더 안에 어떤 라우트가 정의되어있는지 확인할 수 있다.

• pages 안에 있는 라우트에는 404와 api가 정의되어있음을 확인할 수 있다.

• First Load JS shared by all
  : 처음으로 로드되는 JS 파일의 크기와 몇개의 청크가 있는지 확인 가능

• 라우트 부분을 잘 보면 앞에 기호가 표시되어있는 것을 알 수 있다.
  - λ(람다) 표시 : Server
  - O(동그라미)표시 : Static

  O표시, 즉 app 폴더 안에 정의된 라우트들은 현재 모두
  Static하게 컴파일되어서 HTML파일로 이미 서버에 만들어져있음을 알 수 있다.
  (현재 기준으로는 내 pc 상에 HTML 파일이 만들어져 있음)
  👉 SSG
  
  api의 경우 요청이 올 때마다 실행이 되는 특징을 가지므로
  서버 사이드에서 런타임하게 동작하는 함수임을 알 수 있다.

  빌드 후 프로젝트 실행

  빌드 이후 npm run start로 실행을 해보면,
  이미 빌드가 진행되었고 html 파일이 만들어져 있는 상태이기 때문에
  라우트 이동 시 렌더링이 매우 빠르게 진행되는 것을 확인 할 수 있었다.

  localhost:3000/products/pants 경로에 접근하였을 때
  html파일을 가장 빠르게 받아오는 것을 확인 🔻

  

Outro

Next.js 프로젝트를 진행할 때 페이지가 SSG인지 SSR인지 등을 확인해보기 위해
build를 통해서 이렇게 확인하면 유용할 것 같다는 생각을 하였다.

빌드 후 프로젝트를 실행해봄으로서 속도차이 체감을 해 본적이 처음이였던 것 같다.

Next.js의 이점은 확실히 하이브리드 렌더링 (하이드레이션)에 있다고 생각해서
빌드를 통해 알 수 있는 정보들을 유용하게 활용해야겠다 !