NextJS와 GatsbyJS 중 고민하는 당신에게
우선 NextJS와 GatsbyJS 모두 정말 엄청 좋은 프레임워크이기에 사실 무엇을 써도 좋은 결과물을 얻을 수 있을 것입니다. 하지만, 내가 만약 도입에 기준을 정한다면 서비스의 규모 및 사용할 데이터에 따라 위의 프레임워크를 적절하게 사용 할 예정입니다.
우선 앱내 웹뷰, 실험(a/b testing)을 하는 환경, 쇼핑몰 같은 서비스와 같이 유저에 따라 보여줘야 할 정보들이 다르거나, 데이터가 수시로 변경된다면 나는 무조건 NextJS를 사용 할 예정입니다. 유저 정보를 활용하는 등 동적인 데이터를 SSG로 하나하나 대응하기는 불가능에 가깝고 CSR로 처리한다면 SSG를 사용한 잇점이 많이 줄어들게 됩니다. 동적이진 않지만 데이터가 수시로 변경 된다면 매번 빌드하는 것과 빌드 속도도 무시하지 못할 것입니다. 또한 유연함 까지 GatsbyJS의 경우에는 소개를 위한 퍼블리싱 페이지나 CMS 기반의 WIKI, 블로그를 만들 때와 같이 정적인 데이터가 많거나 CMS등을 가볍게 사용할 때 많이 사용할 것 같습니다. NextJS보다 더 쉽게 구현할 수 있으며, CMS을 연동하기 좋은 구조로 되어있습니다. 게다가 정적인 데이터들의 경우 모두 SSG로 빌드 되어 나가기에 퍼포먼스 측면에서도 더 좋기 때문입니다.
더 읽어보기 - https://shylog.com/which-is-better-nextjs-or-gatsbyjs/
JAMStack
과거에는 사용자가 서버에 요청하는 페이지마다 SSR(Server Side Rendering)을 통해 HTML을 만들어서 제공해 주었습니다. ‘jthcast.dev/login.jsp’, ‘jthcast.dev/home.jsp’처럼요.(물론 지금도 많습니다. 😞)
이후 기술이 발전함에 따라 SPA(Single Page Aplication)을 통으로 제공해 주었는데, SEO의 필요성에 따라 처음 요청받은 페이지만 SSR로 제공하고 그 이후는 마찬가지로 CSR(Client Side Rendering)로 정보를 제공하였습니다. 그리고 최근엔 각 페이지를 HTML로 만들어 캐시 한 후 이를 저장소에서 제공하는 형태로 이루어지는 서비스 형태가 생겼습니다. 따로 SSR할 서버가 필요 없는 Javascript, Api, Markup만 필요하므로 이를 JAMStack이라고 부르고 있습니다. 즉, JAMStack 이란, Javascript와 HTML Markup된 정적인 페이지만을 제공한 후 필요하다면 Api 호출을 통해 데이터를 주입받는 형태입니다.
더 읽어보기 - https://jthcast.dev/posts/gatsby-versus-nextjs/
추가
Gatsby vs Next.js 왜? 그리고 언제 써야 하나?
- create-react-app : React 프로젝트의 기초를 만들어주고 나머지는 너에게 달렸다.
- Gatsby & Next : React 프로젝트의 기초를 만들어준다. 하지만 어떻게 만들어야 하는지에 대한 가이드라인이 있다.
서버사이드에서 렌더 VS Static 생성
Gatsby는 Static 웹사이트 생성도구이다. 이 Static 웹사이트 생성기는 빌드할때 Static HTML을 만들어 낸다. 서버를 사용하지는 않는다. 블로그나 자신의 포트폴리오를 만드는 데 좋다.
Next.Js는 주로 서버쪽에서 렌더링을 하기 위한 도구이다. 서버를 사용하고 새로운 Request를 받을때 마다 HTML을 동적으로 생성한다.
물론 둘 다 API를 클라이언트 사이드에서 호출할 수는 있다. 근본적이 차이는 Next를 돌리기 위해서는 서버가 필요하다. 반면에 Gatsby는 서버 없이도 잘 동작한다.
Gatsby는 Pure한 HTML/CSS/JS를 빌드할때 만들어낸다. 반면 Next는 HTML/CSS/JS를 실행동안에 만들어낸다. 따라서 새로운 요청이 들어올때마다 서버에서 새로운 HTML페이지를 만든다.
데이터 핸들링
이 두 개의 또 다른 근본적인 차이점은 데이터를 어떻게 처리하느냐이다.
Gatsby는 어떻게 앱의 데이터를 처리해야 할지를 알려준다. Next는 이 결정이 온전히 너에게 달려있다.
- Gatsby는 GraphQL이라는 것을 사용한다. 요즘 핫한 그거 맞다. GraphQl은 쿼리 언어로 SQL과 비슷하게 작동한다. 데이터를 Gatsby만의 특별한 문법으로 요청하여 데이터를 받는 방식이다. 컴포넌트에서 어떤 데이터가 필요하다고 하면 그 브라우저에서 데이터를 이용할 수 있게 해준다.
Next.js를 사용해야 할 때
콘텐츠가 많거나 혹은 앞으로 많아질 것이라고 예상된다면 Static은 좋지 못하다. 빌드하는데 시간이 너무 오래걸리기 때문이다.
수천 페이지가 되는 매우 큰 앱이라면 당연히 build할 때 시간이 오래 걸린다. 또 만약 급하게 수정해서 올려야 하는 일이 발생한다면 완벽한 Solution이라고 말할 수 없다.
따라서 만약에 콘텐츠가 계속 늘어날 것이라고 예상하고 있다면 Next.js가 답이다. 또 Data에 접근하는 방법에 있어서 자유롭고 싶다면 Next.js가 낫다.
그리고 만약 Next.js 홈페이지에 들어가서 해보면 알겠지만 문서에 대한 기술이 정말 잘 되어있다. 문답식으로 답을 해결해가면서 튜토리얼을 진행할 수 있기 때문에 훌륭하다고 말하고 싶다.
Gatsby를 사용해야 할 때
개인 취향에 따른 블로그나 웹사이트를 운영해야 한다면, Gatsby를 이용해보자. 환경이 참 CMS에 연결하기 좋게 되어 있고 가이드문서도 훌륭하다.
Gatsby의 튜토리얼은 사실 좀 Next.js에 비하면 복잡하고 방대하다. Gatsby는 스타터 템플릿 역시 무료로 제공하는데, 테마를 선택할 수도 있고 이 템플릿들 모두 웹에서 잘 작동한다.
더 읽어보기 - https://yohanpro.com/posts/ssr
공부하기 좋은 예제
gatsbyJS 블로그만들기
- Pre-rendering
- Data Fetching
- Skeleton UI란? 왜 쓰는가?
- Skeleton UI CSS로
본격 실습 전 어떻게, 왜 쓰는지 알아보기 😀
