Gatsby에 대해 설명하기 전에..
Gatsby는 React 기반으로 설계된 프레임워크입니다. 이때 Gatsby를 알기전에 JAM Stack이라는 용어에 대해서 알아야 할 필요가 있습니다.
블로그나 포트폴리오와 같이 정적 페이지를 개발해야 할 때에 활용됩니다. 정적 사이트 생성기인 Gatsby를 시작하기 전에 JAM Stack에 대해 먼저 알아봅시다.
JAM Stack이란?
JAM Stack은 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍처입니다.
즉 JAM Stack은 JavaScript, API, MarkUp Stack의 약자로, 자바스크립트와 API, HTML이나 CSS 등을 칭하는 MarkUp으로 이루어진 웹 구성 방법입니다.
이름에 있는 그대로 저 3가지의 기술을 통해 홈페이지를 만든다는 것인데, 그럼 기존 웹 사이트와는 어떤 차이점이 있을까요?
기존 웹 사이트의 방식은 대부분 서버에서 데이터베이스 또는 CMS(Content Management System)로부터 추출한 데이터를 프론트엔드에 뿌려주는 방식입니다. 이는 클라이언트에 데이터를 보여주기 위해서 많은 절차를 거쳐야만 하기 때문에 구조가 복잡합니다.
하지만 JAM Stack을 사용한 방식은 기존 웹사이트의 방식과 다르게 절차가 매우 간단합니다.
각종 마크업 요소와 다양한 API를 통해 만든 정적 웹사이트를 Pre-Render한 것을 CDN(Content Delivery Network)을 통해 웹 사이트를 제공해줍니다. 그렇기 때문에 기존 방식에 비해 더 빠르게 웹 사이트를 볼 수 있다는 거죠.
1. 기존 방식에 비해 더 빠르게 웹 사이트를 제공할 수 있습니다.
구체적으로는 JAM Stack은 렌더링할 화면들을 모두 Pre-Render하여 제공되어 그만큼 사용자에게 화면을 보여주기 위해 준비하는 시간을 단축할 수 있습니다.
이에 더불어서 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First Byte)를 최소화하는 데에는 미리 빌드 된 파일을 CDN을 통해 제공하는 것보다 나은 방법이 없다고 합니다.
2. 안전한 웹 사이트를 제공할 수 있습니다.
JAM Stack은 API를 통해 정적 사이트를 생성합니다.
여기서 사용되는 API는 JAM Stack을 활용한 각 프레임워크에서의 마이크로 서비스로서, 사이트 생성을 위한 프로세스가 추상화되어 있기 때문에 그만큼 공격 노출 범위가 감소하게 됩니다.
따라서 개발자는 웹 개발 중 발생할 수 있는 취약점에 대해 보다 덜 신경쓸 수 있습니다.
3. 스케일링하기 쉬운 웹 사이트를 제공할 수 있습니다.
정적 웹사이트에서의 스케일링이란, 더 많은 지역에서 홈페이지를 제공할 수 있게 하는 의미입니다. 미리 빌드 된 파일 제공을 담당하는 CDN이 그 역할을 충분히 수행해낼 수 있습니다.
Gatsby VS Next.js
Gatsby와 함께 항상 언급되는 JAM Stack 기반 프레임워크인 Next.js와 비교를 또 빼놓을 수가 없죠. 둘 모두 React 기반의 프레임워크입니다.
그럼 이쯤에서 한번쯤은 모두 고민을 할 것입니다.
🤷🏼♀️ Next.js가 대세라는데? 현재 1등을 달리고 있는 프레임워크라는데..
항상 프론트엔드 개발을 수행하면서 딜레마인 부분인것 같습니다. 트렌드를 쫓는다는것..하지만 각 프레임워크마다 모두 장단점이 있고, 목적에 맞게 잘 활용하는것이 중요하다고 생각합니다.
Gatsby와 Next.js 역시 두 프레임워크의 사용 용도가 다릅니다.
Next.js는 정적 사이트 생성의 기능도 있지만 주로 SSR을 위해 사용하는 프레임워크입니다. 하지만 Gatsby는 서버 없이, 오로지 정적 사이트 생성를 위해 사용하는 프레임워크입니다.
그래서 Next.js는 주로 기업단위의 대규모 프로젝트에 활용이 되고, Gatsby는 개인 포트폴리오나 기술 블로그 개발에 활용이 됩니다. (저는 저만의 기술 블로그를 만들 예정이기에 Gatsby를 활용할것입니다.)