Post

런타임이란 뭘까

개발 단계: next dev

서버가 로컬 환경에서 호스팅 되어 로컬에서 테스트 하는 용도다. 마치 live server extension처럼. 이 때는 최적화를 하지 않는다. 명령어 자체도 dev 지 않는가. 즉 only devlope(개발) 단계에서 실행해본다는 의미로 명령어가 쓰인다. 고로 수정사항이 있으면 바로 브라우저상에서 재렌더링 되어 개발자에게 보여진다.

배포(프로덕션) 준비: next build

배포 전에 코드를 최적화(코드 스플리팅, 이미지 최적화, 트리 셰이킹, 압축 …)해서 빌드하는 과정을 말한다. 빌드 결과는 .next 폴더에 들어가며, 터미널에는 각 라우트에 대한 정보를 출력한다.

1
2
3
Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB
  • (Static): 정적으로 사전 렌더링된 페이지.
  • ƒ (Dynamic): 서버에서 동적으로 렌더링 되는 페이지.
  • size: 사용자가 페이지를 탐색할 때 클라이언트 측에서 다운로드 되는 크기.
  • first load js: 서버에서 처음 해당 페이지에 접속할 때 다운로드 되는 크기.

배포(프로덕션) 실행: next start

앞서 최적화 한 빌드 결과물을 실제로 실행하는 명령어다. 이는 next dev 와 다르게 내가 코드를 수정해도 즉각적으로 그 결과물이 보여지지 않는다. 빌드한 결과물을 보여주는 것이기에 수정한 결과를 보고 싶다면 당연하겠지만 다시 빌드해야 수정본을 포함한 빌드물을 볼 수 있다.


그럼 빌드한 코드를 실행하는 과정이 “어떻게” 일어나는가?

런타임이란

코드가 실제로 실행되는 환경을 말한다. 타입스크립트든 자바스크립트든 이는 결국 고급언어니까 이걸 기계가 알아먹게 실행하려면 런타임이 필요하다. next.js를 실행하는 런타임 언어는 Node.js다.

Serverless

  • 개발자가 서버 관리 없이 클라우드가 알아서 코드를 실행하는 클라우드 런타임 환경으로 중앙 집중형 모델.
    • AWS lambda라든가, Google Colud functions등의 클라우드가 대신 서버를 관리해준다. 따라서 트래픽 증가에 자동 확장(대응)이 가능하다. 단, 함수 상태는 유지되지 않는다.

Edge

  • 사용자와 가까운 위치에서 코드를 실행하는 분산 컴퓨팅 모델.
    • 클라우드 제공 업체가 전 세계 여러 도시에 수백개의 데이터 센터를 운영한다. 즉 사용자가 웹에 접속하면 그 사용자의 지리적 위치와 가장 가까운 데이터센터에서 코드가 실행된다. 한마디로 서울에 사는 사람이 사이트를 접속하면 서울에 있는 데이터 센터에서 동적 데이터를 보내는거고, 영국에 사는 사람이 사이트를 접속하면 영국에 있는 데이터 센터에서 동적 데이터를 보내는거다. 따라서 latency가 낮고, 페이지가 더 빠르게 로드된다.
    • 이런 특성 덕에 middleware에서 기본 런타임으로 edge가 쓰인다. 만약 다른 라우터에서도 edge를 사용하고 싶다면, app router 기준 export const runtime = 'edge'; 와 같이 runtime을 명시해줘야된다.
    • 단, 파일 시스템 접근이나 isr 등 지원하지 못하는 부분이 많다. 왜? 전세계 수백 곳에서 분산 배포돼서 실행되다보니, 어느 지역에서 캐시가 갱신됐는지 관리하기가 복잡하기 때문이다.

그럼 Vercel은 어떻게 동작하는가?

  1. 코드를 push하면 Vercel이 자동으로 빌드 프로세스를 시작하고 Next.js 프로젝트의 경우 next build가 실행된다.
  2. 빌드 과정에서 각 라우트 특성에 따라 실행 위치와 런타임이 결정된다.
    • SSG(Static Site Generation) 페이지: CDN에 배포
    • SSR(Server Side Rendering) 페이지: 서버리스 함수로 배포
    • Middleware: Edge 런타임에 배포
  3. 배치된 위치에 다양한 서버 유형을 활용하여 적절한 런타임 요청을 처리한다.
    • 애플리케이션 서버: 동적 콘텐츠 생성 (SSR, API 라우트)
    • 캐시 서버: 응답 캐싱으로 성능 향상
    • CDN 노드: 전역 분산된 정적 파일 서비스
    • 데이터베이스 서버: 영구 데이터 저장 (Vercel 자체 제공이 아닌 외부 연결)
    • Edge Function: 사용자 가까운 위치에서 경량 코드 실행

참고

npm과 npx의 차이

  • npm (Node Package Manager):
    • package.json에 정의된 스크립트를 실행할 때 사용.
    • 패키지를 전역(-g) 또는 로컬로 설치할 때 사용.
  • npx (Node Package eXecute):
    • 패키지를 설치하지 않고도 일회성으로 실행할 수 있는 도구.
    • 실행할 때마다 필요한 패키지를 임시로 다운로드하고 실행 후 삭제.

참고 자료

This post is licensed under CC BY 4.0 by the author.