Gatsby 는 JAM Stack 을 활용한 정적 사이트 생성기입니다. Gatsby 를 시작하기 전에 꼭 알아야 할 필수 개념에 대해 먼저 알아보겠습니다.

JAM Stack 동작 원리

마크업 요소와 다양한 API 를 통해 만든 정적 웹 사이트를 Pre-Render 한 것을 CDN(Content Delivery Network) 을 통해 웹 사이트를 열람할 수 있습니다.

NextJS가 아닌 Gatsby 사용하는 이유

Next.js 는 정적 사이트 생성의 기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크입니다.

즉, 서버와 통신을 하며 요청을 받을 때마다 동적으로 웹 사이트를 생성합니다.

하지만 Gatsby 는 서버 없이, 오로지 정적 사이트 생성을 위해 사용하는 프레임워크입니다.

그래서 서비스 및 기업 소개 페이지, 블로그, 포트폴리오 등에 많이 사용됩니다.

Gatsby 특장점

• 리액트 기술을 그대로 사용이 가능하다.
• 빠른 성능을 제공한다.(prefetch, lazyloading, 해상도에 따른 이미지사이즈 조절 등등)
• 확장성이 좋다.(sass, prism등 라이브러리 사용에 용이하다.)
• 최적화가 쉽다.(gatsby-plugin-react-helmet을 통해서 header태그에 검색엔진 최적화 코드 삽입이 가능하다.)
• 추후에 offline, pwa 처리 또한 간편하다.
• 특히 요즘에 한창 뜨고 있는 GraphQL을 사용해 볼 수 있다.(restapi를 ajax, axios, fetch가 아닌 query에 특화된 라이브러리)