Gatsby의 단어가 희소하신 분은 개츠비가 뭔데? 라고 하실 수 있다.
개념
: 프론트엔드 라이브러리 React를 기반으로 하며 최근 프론트엔드 시장에서 자주 등장하며 빠르게 성장하고 있는 JAM Stack 기반의 정적 사이트 생성 프레임워크이다.
JAM Stack이란?
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.
공식 설명에 의하면 JAM Stack은 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍처라고 한다.
JAM Stack은 JavaScript, API, MarkUp Stack에서 하나씩 앞 글자를 따 온 약자로, 자바스크립트와 API, HTML이나 CSS 등을 칭하는 MarkUp으로 이루어진 웹 구성 방법이다.
이름에 있는 그대로 저 3가지의 기술을 통해 홈페이지를 만든다는 것인데, 그럼 기존 웹 사이트와는 어떤 차이점이 있을까요?
- 기존 웹 사이트 : 대부분 서버에서 데이터베이스 또는 CMS(Content Management System)로부터 추출한 데이터를 프론트엔드에 뿌려주는 방식이다.
- 사진에서 보이는 것과 같이 클라이언트에 데이터를 보여주기 위해서 많은 절차를 거쳐야만 하기 때문에 구조가 복잡하다.
- SPA : 처음 요청받은 페이지만 SSR 로 제공하고 나머지는 CSR 로 제공한다.
- JAM Stack : 각종 마크업 요소와 다양한 API를 통해 만든 정적 웹 사이트를 Pre-Render한 것을 CDN(Content Delivery Network)에서 제공한다.
Gatsby의 장점
1. React.js 기반 프레임워크이다.
많은 개발자들이 말하는 react.js기반이여서 접근성이 좋다는 것이다. 그렇기 때문에 react를 어느 정도 다룰 수 있다면 큰 어려움 없이 개발 가능하다.
2. 보안에 유리하다.
JAM Stack은 API를 통해 정적 사이트를 생성한다. API는 JAM Stack을 활용한 각 프레임워크에서의 마이크로 서비스로서, 사이트 생성을 위한 프로세스가 추상화되어 있기 때문에 그만큼 공격 노출 범위가 감소하게 된다. 웹 개발 중 발생할 수 있는 취약점에 대해 보다 덜 신경쓸 수 있다.
3. SEO와 성능에 좋다.
정적 웹 사이트에서의 스케일링은 더 많은 지역에서 홈페이지를 제공할 수 있게 한다. 미리 빌드 된 파일 제공을 담당하는 CDN이 이를 수행한다.
npm trends
최근 1년간 대표적인 JAM Stack 기반 프레임워크 4가지의 다운로드 횟수를 비교해보자.
다운로드 수로 비교해보면 next>nuxt>gatsby순이다.
stats으로 비교해보면 버전 next>gatsby>nuxt순이며, updated로 보면 nuxt>gatsby>next순이다.
솔직히 다 괜찮은 프레임워크라 상관없지만, 나의 경우에 정적인 페이지를 만들고자 해서 next보다는 개츠비를 선택했다. 동적인 페이지를 구현하고자 한다면 next의 장점을 알고 있는 개발자라면 이를 선택할 것이다.
