① Gastby 개념알기 - Hello Gastby 👀
회사에서 개츠비를 사용해서 프로젝트를 진행한다고 한다. 그래서 공부를 해야한다.. 개츠비 동작원리와 장점 등을 알아보려고 한다.
✨ HELLO GASTBY_JS
◻ gastby.js란?
gastyby.js란 react 기반의 정적 페이지 생성 프레임워크이다. 여러가지 데이터들을 그래프QL이 관리하도록 가져온다. 그리고 그 데이터를 HTML, CSS, REACT로 만들어진 UI에 뿌려준다. 이것을 사이트로 만들어준다.
일반적으로 CSR(Client Side Rendering)은 SEO측면에서 취약하다. 왜냐하면 최초 한번 페이지를 로딩한 후 JS를 이용해 동적으로 데이터만 변경하여 화면의 콘텐츠를 바꾸는 방식이기 때문이다. 한번에 로딩하고, 바뀐 부분만 렌더링 하기 때문에 SEO가 취약하고 데이터가 많을 경우 첫 로딩 속도가 느려질 수 있다.
또한 대부분의 검색엔진들이 JS를 지원하지 않는다고 한다.
SEO란 검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스이다. 검색엔진 최적화 작업을 하는 사람의 직책을 의미하기도 한다.
검색엔진 3단계 프로세스
- 크롤링(Crawling): 웹 크롤러가 웹페이지의 콘텐츠를 복사하여 검색엔진으로 가져옵니다.
- 인덱싱(Indexing): 가져온 콘텐츠를 주제별로 색인하여 보관합니다.
- 랭킹(Ranking): 검색 의도에 맞춰 색인된 콘텐츠에 순위를 부여한 후 결과로 제공합니다. 검색엔진 기본조건 SEO가 잘 되기 위해서는 웹 크롤러가 웹 사이트를 잘 읽어가고, 각 페이지가 트래픽을 유입시키는 주제로 잘 색인되고, 옾은 랭킹으로 검색 결과 페이지에 노출되도록 페이지별로 콘텐츠를 최적화하는 작업들이 전제되어야 한다. => 코드의 최적화가 잘 되어 있어야 한다.
웹 크롤러가 웹 사이트를 잘 읽어 검색엔진을 최적화 시키기 위해서는, CSR 방식보다는 , 각 페이지로 라우팅이 되어 필요 meta 태그를 추가하고 서버에서 컨트롤 하는SSR 방식이 더 용이할 것이다. SSR방식은 빌드되는 시점에 HTML 문서를 만들어 마크업이 생성되어, 클라이언트로 전달하기 때문에 속도가 빠르기 때문이다.
◾ 그럼 왜 Next.js 대신 Gastyby.js 를 사용하는 걸까?
▪ 장점
- SEO 용이
- 웹 개발 단순화 및 개발 속도 향상
- JAM Stack ( Javascript, Api, Markup Stack)
Gastby.js는 SSG(Static Site Generation)에 최적화된 프레임 워크이고, static 페이지는 구성하는데 용이하다.
특히 markdown base의 JAMStack 구성하는게 매우 쉬웠고, SSG 형태에서의 최적화를 위한 노력을 많이 했음을 알 수 있다.
유저에 따라 보여줘야 할 정보가 동적이지 않거나, 데이터가 수시로 변경 되는 것이 아닐 경우, 예를 들어
- 블로그
- 광고사이트
- 채용사이트
- 관리자 페이지
를 생성할 때는 데이터 패칭이 최소화 되기 때문에, 서버사이드 대신 SSG 에 최적화된 Gastby.JS 가 유용하기 때문에 사용 하는 것이다.
다음 블로그에서 동작원리를 이해하고, 동작원리에 따른 예제를 만들어 보도록하자.