Vercel의 Next.js에 대한 목표는 개발자 경험, 유저 경험 이 두 가지에 대한 개선이라고 말한다. 그리고 실제로 그 목표에 따른 여러가지 유용한 기능들을 제공하고 있다. 그 중에서 몇 가지를 이야기해보고자 한다.
Next.js 핵심기능
- SSR 지원
- 손쉬운 정적 사이트 제작
- 코드 스플리팅
- 파일 시스템 라우팅
- 이미지 컴포넌트와 이미지 자동 최적화
- Build 작업시 최적화 작업을 진행하여 빠르고 더 작은 build size 확인 가능
사전 렌더링
첫번째는 pre-rendering이다. Next.js는 기본적으로 모든 페이지를 사전 렌더링한다. 즉, Next.js는 클라이언트에서 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다.
서버 사이드에서 빌드 시 실행되는 getStaticProps 함수를 통해 렌더링에 필요한 데이터를 받아오고, pre-rendering된 페이지는 초기 페이지 로딩이 CSR에 비해 빠르며, 더 나은 SEO 성능을 가져온다.
코드 스플리팅
일반적으로 리액트는 싱글 페이지 어플리케이션이기 때문에 초기 렌더링 시 모든 컴포넌트를 내려받는다. 하지만 규모와 용량이 커질 경우 로딩 속도가 지연되는 문제점이 발생할 수 있다. Next는 이러한 문제점을 개선하기 위해 필요 시에만 파일을 불러올 수 있게 여러 개의 파일을 분리하는 코드 스플리팅 기능을 제공한다.
라우트 기반의 코드 스플리팅은 한번에 파싱, 컴파일 되는 코드의 양을 최소화 시키기 때문에 페이지 로드 시간이 빨라진다.
예를 들어 브라우저가 실행되고, 사용자가 사이트에 접속하면 첫 페이지인 index page만 불러오게 되고, 그 이후에 다른 페이지로 넘어갔을 때는 해당 페이지만 불러오게 된다.
파일 시스템 라우팅
Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있다. pages 디렉토리에 파일을 추가하면 자동으로 경로로 사용할 수 있다. 이 기능은 웹 사이트 내에서 경로를 생성하는 프로세스를 크게 단순화시킨다.
Ex)
pages/index.js → /
pages/blog/index.js → /blog
pages/blog/first-post.js → /blog/first-post
pages/blog/[slug].js→ /blog/:slug( /blog/hello-world)
pages/[username]/settings.js→ /:username/settings( /foo/settings)
이미지 컴포넌트 및 최적화
어플리케이션에 이미지를 추가할 때 이미지가 가능한 한 빨리 제공되고, 레이아웃 변경 없이 나타나는 것은 뛰어난 사용자 경험을 위해 필수적이다. Next.js는 내장 이미지 컴포넌트와 자동 이미지 최적화를 지원한다.
<Image> 컴포넌트를 사용한 최적화 기능에는 다음과 같은 특징이 있다.
-
크기 조정 : 각 화면 크기에 맞는 파일 크기 제공
-
외부 소스 최적화 : 모든 이미지 소스에서 작동한다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅되는 경우에도 최적화 할 수 있다
-
낮은 빌드 시간 : 이미지 최적화가 주문형으로 수행되므로 크기와 형식이 다른 여러 이미지를 만들 필요가 없다. 따라서 빌드 시간은 영향을 받지 않는다.
-
지연 로드(lazy-loading) : 이미지는 기본적으로 지연 로드된다. 즉, 뷰포트 외부의 이미지에 대해 페이지 속도가 불이익을 받지 않는다. 이미지는 뷰포트로 스크롤 될 때 로드된다.
-
브라우저가 지원하는 경우 WebP과 같은 최신 형식으로 이미지의 크기를 조정하고 최적화하고 제공한다. 이렇게 하면 뷰포트가 더 작은 장치로 큰 이미지가 전송되는 것을 방지 할 수 있다.
References
