CRA vs Gatsby vs Next.JS

CRA vs Gatsby vs Next.JS

• CRA : Client side rendering : 브라우져가 js script를 다운받고, 그 script 기반으로 브라우져에서 html 렌더링을 함
• 그래서 1) 로딩하는 데 시간이 걸리고 2) seo 최적화가 안좋음 (봇들이 js 기반 페이지들은 크롤링을 잘 못함)

• Gatsby : Static Site Generator
• react의 코드를 기반으로 gatsby를 실행하면, js, css, html로만 이루어진 static site 가 생성됨 (gatsby 그 자체는 일종의 변환기)
• 그래서 로딩도 바로 되고, seo 최적화에 유리
• 하지만 정적 사이트이다보니 실시간으로 서버랑 데이터 교신이 필요한 사이트애서는 부적합

• Next.js
• 브라우져가 url에 접속하는 순간 서버가 html를 만들어줘서 브라우져한테 보내줌 (server side rendering)
• 이미 서버에서 html를 만들고 브라우져에 보내기 때문에 로딩 속도도 빠르고, seo 최적화도 잘 됨
• gatsby, CRA 등 기존 사이트의 문제점을 보완한 가장 진보된 기술이자 framework

그렇다면 Gatsby는 왜 써야하는가?