Nextjs를 배우면 유독 Next에서는 Vercel를 활용하여 배포를 한다.
Next를 입문하지 않으면 재대로 들어보지도 못한 Vercel을 쓰는 이유에 대해서 알아보도록 하자.
Nextjs란?
서버사이드 렌더링(SSR)과 정적 사이트 생성(Static Site Generation, SSG)을 지원하는 리액트 기반의 자바스크립트 프레임워크이다. Vercel에 의해 개발되었으며, 클라이언트와 서버에서 모두 실행될 수 있는 유니버설 자바스크립트 애플리케이션을 생성하는 데 사용된다.
🚗 자바스크립트 프레임워크 보러가기 (Next.js) 포함
Nextjs 주요특징
- 서버사이드 렌더링(SSR)
Next.js는 기본적으로 모든 페이지를 서버사이드에서 렌더링하여 제공한다. 이를 통해 초기 페이지 로드 시간을 줄이고, SEO(검색 엔진 최적화)를 향상시킬 수 있다. SEO에 최적화 되어 있다는게 Nextjs를 사용하는 가장 큰 이유이다. SEO상관없으면 단순 리액트를 사용해도 무방하다고 들었다.
- 정적 사이트 생성 (SSG)
9.3버전부터는 정적 사이트 생성을 지원합니다. 이 기능을 이용하면, 빌드 시점에 HTML을 생성할 수 있다. 이 HTML은 CDN(Content Delivery Network)에 캐싱되므로, 빠른 페이지 로드 속도를 제공한다.
- 파일 기반의 라우팅
파일 시스템을 기반으로 라우팅을 구현합니다. 즉, Pages 디렉토리 내의 파일 구조가 URL 경로를 결정하고 이는 코드의 명확성을 높이고, 라우팅을 쉽게 관리할 수 있도록 돕는다.
- 핫 리로딩
개발 중에 소스 코드를 수정하면 Next.js는 자동으로 페이지를 업데이트 한다. 이를 통해 개발자는 변경 사항을 즉시 확인할 수있다.
- API 라우트
Next.js는 API 라우트를 지원합니다. 이를 통해 개발자는 백엔드 로직을 구현할 수 있습니다. API 라우트는 Pages/api 렉토리에 위치하며, 이 디렉토리 내의 파일은 서버리스 함수로 취급됩니다.
- TypeScript 지원
Next.js는 TypeScript를 내장하고 있어, 별도의 설정 없이 TypeScript를 사용할 수 있다.
Vercel란 ?
Vercel은 웹 사이트와 웹 애플리케이션을 개발하고 배포하기 위한 클라우드 플랫폼이다.Vercel은 특히 프론트엔드 개발자와 디자이너에게 초점을 맞추고 있으며, “Jamstack” 아키텍처와 서버리스 함수를 활용하여 빠르고 안정적인 웹 사이트를 제공하는 것을 목표로 하고 있다.
Vercel 주요 특징
- 배포와 호스팅
Vercel은 웹 사이트를 쉽게 배포하고 호스팅할 수 있도로 돕는다. 사용자가 Github, GitLab, Bitbucket와 같은 원격 저장소에서 Vercel을 연동하면 코드를 커밋할 때마다 자동으로 웹사이트가 빌드되고 배포된다.
- 서버리스 함수
Vercel은 서버리스 함수를 지원한다.
서버리스 함수 지원은 백엔드 로직을 서버 없이 관리하고 실행할 수 있게 해준다는 소리이다.
서버리스 함수가 특정 이벤트에 의해 트리거되고, 사용 후에는 자동으로 종료되어 리소스를 효율적으로 사용 할 수 있게 해준다.
- 성능 최적화
Vercel은 웹 사이트의 성능을 최적화하기 위한 여러 기능을 제공한다. 예를 들어, Vercel은 CDN(Content Delivery Network)을 이용하여 웹 사이트의 컨텐츠를 사용자에게 빠르게 제공하며 Vercel은 이미지 최적화, 자동화된 코드 분할 등을 통해 웹 사이트의 로딩 시간을 최소화 시켜 준다.
- 안정성과 보안
Vercel은 HTTPS를 기본으로 제공하며, 모든 배포는 월드와일드한 엣지 네트워크에 복제되어 높은 안정성을 보장한다.
Nextjs에서 Vercel을 쓰는 이유
가장 핵심인 이유는 Nextjs가 Vercel에서 개발된 프레임워크이다. 그래서 Vercel를 사용하면 아주 호환이 잘된다고 볼 수 있다.
또한 위에서 말했듯이 원격 저장소에 푸시를 하면 즉각적으로 빌드하여 배포되며 서버리스 함수를 지원하여 API Routes를 서버리스 함수로 자동 변환한다.
성능적으로 접근하면 Static Generation과 Server Side Rendering을 최적화 하여 웹사이트에 성능을 향상시킬 수 있다는 장점도 있다. Vercel은 클라우드 기반으로 작동하기 때문에, 웹사이트의 트래픽이 증가하더라도 자동으로 스케일링을 해주어서 안정적인 서비스를 제공 한다.
물론 Nextjs가 Vercel만의 프레임워크는 아니다. 다른 호스팅 플랫폼에도 배포가 가능하며 어떤 플랫폼을 사용할지는 개발자의 몫이다.
Nextjs + Vercel로 만들어진 사이트
Vercel 자체의 웹사이트도 Nextjs + Vercel로 만들어진 사이트이며 Vercel 플랫폼을 보여주는 대표적인 사례
한국에서 아프리카랑 양대 스트링 플랫폼인 트위치TV 또한 마찬가지인데 트위치TV에 개발자 포털 페이지가 이에 해당 한다.
잘 모르시는 분들이 많을텐데 해외 인기 스트리밍 플랫폼인 Hulu의 프론트엔드가 Vercel와 Next.js로 제작되었다. 사이트가 되게 이쁘게 제작되어 있다.
유독 Vercel로 만든 웹 사이트들은 이쁜 것 같아서 그 이유도 찾아 보았다.
그 이유는 Vercel의 웹사이트는 현대적이고 세련된 디자인을 갖추고 있다. 미니멀한 디자인 원칙을 따라 구성되어 있으며, 깔끔하고 직관적인 인터페이스를 제공한다. 이러한 디자인 접근은 사용자 경험을 향상시키고, 사용자가 웹사이트를 쉽게 탐색하고 이해할 수 있도록 돕는다.
또한 다양한 글꼴, 색상 팔레트, 아이콘 및 그래픽 디자인이 조화롭게 결합되어 사용자에게 시각적으로 매력적인 경험을 제공하여 일관된 디자인 원칙을 준수하면서도 창의적인 요소를 적절히 활용하여 독특한 분위기를 조성한다.
아무래도 비교적 Vercel로 만든 사이트들은 최근에 만들어진 사이트가 많아서 현대적인 요소들이 많이 들어간 것과 Vercel의 제품과 기술적 우수성을 전달하는 포트폴리오 효과의 합작품인 것이다.