Create React App, Next.js, Gatsby

리액트를 이용한 웹앱 프로젝트를 시작할 때 늘 언제나 CRA(Create React App)을 사용했다. 분명 다른 툴도 있는데 CRA만 사용한 이유는 잘 몰랐기 때문에 선택지에 아예 없었다. 그렇게 프로젝트를 진행하면서 "그럼 나는 CRA가 뭔지 잘 알고 사용하고 있나?" 라는 생각이 들었다.

 

리액트 측에서 추천하는 툴체인은 다음과 같다.

• React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.
• 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요.
• 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요.

하나씩 정리해보자.

---

React

리액트는 메타에서 개발한 오픈 소스 라이브러리다. 메타는 페이스북에서 이름을 바꾼 회사(2021년)로 인스타그램, 왓츠앱 등 유명한 기업들을 인수했다. 프론트엔드 개발자 사이에 AngulartJS, Vue.js와 더불어 많은 인기를 얻고 있다. SPA를 전제로 하고 있으며, 업데이트를 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에. 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 

 

[ 특징 ]

• 선언적이다.
  : 리액트는 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다.
• 컴포넌트 기반이다.
  : 캡슐화가 된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.

 

CRA(Creat React App)

CRA는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와준다. 웹팩, 바벨 등 필수라고 할 수 있는 개발 환경도 구축해 준다.

• SPA(Single Page Application) 이고 백엔드가 필요하지 않은 경우
• 서버 API만 있으면 되는 경우

npx create-react-app my-app
cd my-app
npm start

Next.js

Next.js 는 React의 SSR(Server Side Rendering)을 쉽게 구현 할 수 있게 도와주는 프레임워크다. 리액트 개발자에게 생산성과 편의성을 증대시켜주며 이는 곧 SPA의 단점을 커버해준다. 

• 프론트, 백엔드가 모두 필요한 경우
• Node.js를 서버 환경으로 사용하고 있을때
• 검색 엔진 최적화(Search Engine Optimization)

작동 원리

1. 초기에 사용자가 Server에 페이지 접속을 요청하면 SSR 방식으로 렌더링 될 HTML을 보낸다.
2. 브라우저에서 JavaScript를 다운로드하고 React를 실행한다.
3. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR 방식으로 브라우저에서 처리한다.

즉, 초기에 SSR로 렌더링할 HTML을 보내기 때문에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있다.

Gatsby

Gatsby는 서버 없이 오로지 정적 사이트 생성을 위해 사용하는 프레임워크다. 일반적으로 서비스 및 기업 소개 페이지, 블로그, 포트폴리오 등에 많이 사용된다. 단순 정적 페이지를 만들어주는 것으로 끝나는 것이 아니라, 필요에 따라 CSR과 SSR, lazy loading을 적절히 섞어 사용할 수 있어 성능 면에서도 단순 정적 페이지보다 큰 장점이 있다.

• 랜딩 페이지를 만드는 경우
• 스태틱 웹사이트를 만드는 경우
• 검색이 잘 되야 하는 경우 (SEO)
• 성능 최적화가 필요한 페이지가 있을 경우