이 글은 원문에서 참고했고 내 생각을 덧붙인 글입니다.
This artice is come from this Site
스택오버 플로우 조사나 JS 개발자 사이트 설문조사에 따르면
Gatsby와 Next.js가 확실히 트렌드고 추세가 될 것이라고 짐작할 수 있다.
참고 : State of JS
그런데 왜 이 두 가지 프레임 워크가 대세가 되어가고 있을까? 지금 내가 글을 쓰고 있는 이 블로그도 Gatsby로 만들어졌고 Netlify를 통해 호스팅을 하고 있는 중이다.
내가 Next.js를 사용해야 할까요? 근데 지금 대세는 Gatsby라고 하는데 그걸 쓰는게 좋을까요?
그래서 나는 이 주제에 대해 심도있게 다루어야겠다고 생각을 했고 이 글이 선택함에 있어서 조금이나마 도움을 주려고 했다.
Gatsby & Next - 소개
Gatsby와 Next를 설명할 때 뭔지 이해하는 게 필요하다.
기본적인 프로젝트들을 만들때 create-react-app을 사용하면 boilerplate를 만들어준다. 마찬가지로 이 두 가지 프레임워크들 역시 어플리케이션의 기초를 만들어준다고 생각하면 된다.
이 두개의 프레임 워크는 물론 create-react-app과 별개다. 이 두개는 boilerplate로 정의되지는 않고 toolkits으로 분류가 된다. 기초를 만들고 집을 짓는 방법을 알려준다.
요약하자면:
create-react-app : React 프로젝트의 기초를 만들어주고 나머지는 너에게 달렸다.
Gatsby & Next :React 프로젝트의 기초를 만들어준다. 하지만 어떻게 만들어야 하는지에 대한 가이드라인이 있다.
즉, 덧붙이자면 create-react-app은 리액트를 생성하는 도구이고 만든 다음 어떻게 할지는 알아서 하면 된다. 하지만 Gatsby와 Next는 가이드 문서를 읽어보지 않으면 어떻게 돌아가는 지 이해하기가 어렵다.
그런데 정말 같은 일을 하는지 궁금하다.
이에 대한 답은 어느 정도는 가능하게 해준다는 것이다.
언뜻 보면, 이 두개는 다음과 같은 점에서 매우 유사하다.
- Boilerplate 어플리케이션을 제공한다.
- 뛰어난 성능을 만들어 내고, SEO(검색엔진최적화)에 프렌들리한 웹사이트를 만들게 해준다.
- 뛰어난 SPA를 어플리케이션을 만들어 준다.
- 매우 어~썸한 개발 경험을 준다.
하지만! 재밌게도 이 둘은 근본적으로 매우 다르다.
서버사이드에서 렌더 VS Static 생성
Gatsby는 Static 웹사이트 생성도구이다. 이 Static 웹사이트 생성기는 빌드할때 Static HTML을 만들어 낸다. 서버를 사용하지는 않는다. 블로그나 자신의 포트폴리오를 만드는 데 좋다.
Next.Js는 주로 서버쪽에서 렌더링을 하기 위한 도구이다. 서버를 사용하고 새로운 Request를 받을때 마다 HTML을 동적으로 생성한다.
물론 둘 다 API를 클라이언트 사이드에서 호출할 수는 있다. 근본적이 차이는 Next를 돌리기 위해서는 서버가 필요하다. 반면에 Gatsby는 서버 없이도 잘 동작한다.
Gatsby는 Pure한 HTML/CSS/JS를 빌드할때 만들어낸다. 반면 Next는 HTML/CSS/JS를 실행동안에 만들어낸다. 따라서 새로운 요청이 들어올때마다 서버에서 새로운 HTML페이지를 만든다.
장단점에 대해서는 너무 깊게 설명하지는 않고 넘어간다. 만약 좀 더 알고 싶다면 이 Site를 참고!
데이터 핸들링
이 두 개의 또 다른 근본적인 차이점은 데이터를 어떻게 처리하느냐이다.
Gatsby는 어떻게 앱의 데이터를 처리해야 할지를 알려준다. Next는 이 결정이 온전히 너에게 달려있다.
이게 과연 무슨 뜻일까?
Gatsby는 GraphQL이라는 것을 사용한다. 요즘 핫한 그거 맞다. GraphQl은 쿼리 언어로 SQL과 비슷하게 작동한다. 데이터를 Gatsby만의 특별한 문법으로 요청하여 데이터를 받는 방식이다.
컴포넌트에서 어떤 데이터가 필요하다고 하면 그 브라우저에서 데이터를 이용할 수 있게 해준다.
예시
import React from "react"
import { graphql } from "gatsby"
export default ({ data }) => (
<div>
<h1>About {data.site.siteMetadata.title}</h1>
<p>We're a very cool website you should return to often.</p>
</div>
)
export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`위 예시에서는 Site에 있는 title을 쿼리로 불러와 사용할 수 있다. 참 놀라운 방식이다.
또 Gatsby는 (이론상으로) 데이터 소스를 통합할 수 있는 여러가지 플러그인들을 제공한다. 예를 들어 Contentful, Wordpress, MongoDB and Forestry 같은 것들이다.
이 플러그인들을 통한다면 우리가 만든 웹사이트를 CMS에 연동시킬 수 있고 콘텐츠들을 외부에서 통제할 수 있게 만들어준다.
만약 develop 환경이 아니라 실제 production을 한다면 GraphQl은 더 이상 사용하지 않는다. 대신에 JSON 파일로 데이터는 유지된다.
그래서 뭘 선택하라고??
사실 Gatsby를 쓰냐 Next.js를 쓰냐는 오로지 쓰는 사람이 어떻게 쓰느냐에 따라 달려있다. 둘 다 Awesome 하니까 걱정안해도 된다.
Next.js를 사용해야 할 때
콘텐츠가 많거나 혹은 앞으로 많아질 것이라고 예상된다면 Static은 좋지 못하다. 빌드하는데 시간이 너무 오래걸리기 때문이다.
수천 페이지가 되는 매우 큰 앱이라면 당연히 build할 때 시간이 오래 걸린다. 또 만약 급하게 수정해서 올려야 하는 일이 발생한다면 완벽한 Solution이라고 말할 수 없다.
따라서 만약에 콘텐츠가 계속 늘어날 것이라고 예상하고 있다면 Next.js가 답이다. 또 Data에 접근하는 방법에 있어서 자유롭고 싶다면 Next.js가 낫다.
그리고 만약 Next.js 홈페이지에 들어가서 해보면 알겠지만 문서에 대한 기술이 정말 잘 되어있다. 문답식으로 답을 해결해가면서 튜토리얼을 진행할 수 있기 때문에 훌륭하다고 말하고 싶다.
Gatsby를 사용해야 할 때
개인 취향에 따른 블로그나 웹사이트를 운영해야 한다면, Gatsby를 이용해보자. 환경이 참 CMS에 연결하기 좋게 되어 있고 가이드문서도 훌륭하다.
Gatsby의 튜토리얼은 사실 좀 Next.js에 비하면 복잡하고 방대하다. Gatsby는 스타터 템플릿 역시 무료로 제공하는데, 테마를 선택할 수도 있고 이 템플릿들 모두 웹에서 잘 작동한다.
내 블로그는 Gatsby로 만들어져 있다. 사실 아직 GraphQl을 잘 모르고 이미 만들어져 있는 theme를 가져와서 사용중인데, 아직 신생이라 그런지 Theme 자체는 내가 맘에 드는게 별로 없었다. 나중에 가면 더 달라질 수 있겠지만 말이다.
Gatsby는 만족스럽다. 이렇게 소규모 블로그를 쓴다면 더할 나위없는 선택이 아닐까 싶다.
반면에 Next.js는 기업이 좋아할 만하다. 얼마 전 admin사이트를 구축했던 적이 있는데, 전통적으로 작업했다.
API 서버는 AWS ec2에 연결하여 front페이지는 따로 이 API를 호출하는 방식이다.
그렇게 만들다 보니 front 따로 API 따로 작업을 해야 했는데 Next.js를 사용했다면 서버 하나에만 올리고 SSR로
돌리는 것이 간단하지 않았을까 싶다.
물론 아직 능력이 부족하여 그 말은 꺼내지도 못했다. 혼자 사이드 프로젝트로 Next를 공부해 보고 있는데 저번에 만든 Admin 사이트를 Next.js를 사용해서 하나로 만들어 보는 작업이다.