Next.js
The React Framework for the Web
— Vercel Next.js 공식 웹사이트 메인 타이틀
분명 프론트엔드 프레임워크라고 해서 배웠는데, 어느 순간 백엔드 DB 접속 코드를 짜고 있고 서버 인프라 비용 걱정을 하게 만든다. 버전 13의 App Router 업데이트 이후, 어제 배포한 내 프로젝트의 작동 방식이 오늘의 공식 가이드라인과 달라져 머리를 쥐어뜯게 된다.(...)
1. 개요
Vercel이 개발한 React 기반의 오픈소스 풀스택 메타 프레임워크. 기존 React가 브라우저에서 모든 화면을 그리는 클라이언트 사이드 렌더링(CSR)의 한계로 인해 검색 엔진 최적화(SEO) 및 초기 로딩 속도에서 참패하자, 이를 구원하기 위해 등장했다. 오늘날 현대 웹 개발 생태계에서 단순한 라이브러리인 React만 단독으로 프로덕션에 도입하는 일은 드물며, 대부분의 대형 서비스는 Next.js를 기본 뼈대로 깔고 들어가는 것이 업계 표준으로 자리 잡았다.
2. 서버 사이드 렌더링(SSR)과 렌더링 삼형제
Next.js의 최대 무기는 단연 다양한 렌더링 전략이다. 서버에서 HTML을 미리 완성하여 클라이언트에 내려보내는 서버 사이드 렌더링(Server-Side Rendering, SSR)을 시작으로, 빌드 타임에 정적 페이지를 모두 구워두는 정적 페이지 생성(Static Site Generation, SSG), 그리고 정적 페이지를 유지하되 주기적으로 서버에서 데이터를 갱신하는 점진적 정적 재생성(Incremental Static Regeneration, ISR)을 컴포넌트 단위로 혼합해 사용할 수 있다. 덕분에 서비스의 특성(정적 블로그, 실시간 쇼핑몰 등)에 맞추어 완벽한 페이지 로딩 속도를 최적화할 수 있다. 물론 개발자가 이 캐싱 타이밍과 데이터 갱신 생명주기를 1ms 단위로 머릿속에서 추적하지 못하면, 사용자에게 한 달 전의 품절 상품 데이터를 영원히 노출하는 기묘한 버그를 맛볼 수 있다.(...)
3. App Router의 도입과 서버 컴포넌트 혁명
과거 /pages 폴더 하위에 파일만 만들면 라우팅이 자동으로 되던 Pages Router 시절을 지나, Next.js 13 버전에서 App Router라는 파격적인 패러다임 시프트를 선언했다. 핵심은 바로 서버 컴포넌트(React Server Components, RSC)의 적극적인 도입이다. 컴포넌트 자체를 서버에서만 렌더링하여 자바스크립트 번들 용량을 '0'으로 만들고, 브라우저의 연산 부담을 비약적으로 줄였다. 문제는 서버 컴포넌트와 클라이언트 컴포넌트가 뒤섞이면서 발생한다. 컴포넌트 상단에 "use client" 지시어를 깜빡하는 순간, 브라우저 API(DOM API, window 등)를 호출하려다 서버 터미널에 시뻘건 에러가 터지며 빌드가 사정없이 붕괴된다. 이로 인해 수많은 프론트엔드 주니어들이 하루아침에 강제로 Node.js 백엔드 디버깅 전문가가 되었다.1
4. 관련 밈 및 드립
4.1. Vercel의 노예와 인프라 락인(Lock-in)
Next.js는 뛰어난 오픈소스 프레임워크이지만, 이를 개발한 Vercel 클라우드 플랫폼에 올렸을 때 비로소 100%의 성능과 원클릭 배포 편의성을 자랑하도록 설계되어 있다. 자체 AWS나 독립형 가상 서버(Nginx 등)에 수동으로 Docker 컨테이너를 올리려 하면 이미지 최적화, 정적 자산 캐싱, ISR 등이 제대로 안 돌아가며 온갖 삽질을 유발한다. 결국 울며 겨자 먹기로 개발자들은 Vercel 요금제에 결제 카드를 등록하게 되며, 업계에서는 'Vercel은 Next.js라는 강력한 마약을 무료로 뿌려 인프라 종속성이라는 감옥에 개발자들을 가두는 악마의 비즈니스 모델을 완성했다'는 농담 반 진담 반의 한탄이 지배적이다.(...)
4.2. Next JS 가 아니라 Vercel Framework 인가요
매년 열리는 Next.js Conf에서 발표되는 최신 기능들이 사실상 Vercel 요금제의 고가 요금제 기능이나 Vercel 인프라에서만 완벽히 매핑되어 작동하는 것을 꼬집는 밈이다. '로컬 환경에서는 분명 잘 되었는데 배포만 하면 터진다'는 슬픈 전설의 8할은 Next.js의 독자적인 서버 런타임 캐시 동작이 AWS Lambda 환경 등과 호환성을 타기 때문이다.
5. 여담
- Vercel의 대규모 인재 영입: Vercel은 Next.js를 세계 최고의 도구로 만들기 위해, React 핵심 개발팀 멤버는 물론이고 자바스크립트 빌드 툴인 Webpack의 창시자 토비아스 코퍼스(Tobias Koppers), Svelte의 창시자 리치 해리스(Rich Harris) 등을 닥치는 대로 영입해 실리콘밸리의 자바스크립트 어벤져스를 조직했다.
- Next.js의 전신, ZEIT: Next.js를 개발한 기업 Vercel의 원래 사명은 'ZEIT'였다. 당시 미니멀리즘과 엄청난 개발자 도구 감성을 내세웠는데, 사명을 Vercel로 바꾸고 Next.js의 대흥행에 성공하면서 유니콘 기업의 반열에 당당히 올라섰다.
- SWC 컴파일러 전환: 기존의 자바스크립트 트랜스파일러인 Babel이 너무 느리다는 지적을 해결하기 위해, Next.js 12부터는 Rust 언어로 제작된 초고속 컴파일 엔진인 'SWC(Speedy Web Compiler)'를 기본 내장했다. 덕분에 빌드 속도가 최대 3~10배까지 빨라지며 개발자들의 커피 타임이 단축되었다.