Portfolio

Intro - 소개 Why - 잼스택의 등장배경 대세가 된 SPA와 치명적인 단점 Serverless 웹 구조 What - 잼스택의 특징 pre-rendering 과 deCoupling 잼스택의 장점 잼스택의 한계 및 사용이 적합한 상황 How - 잼스택을 통한 개발방법 HeadlessCMS / Serverless Func 정적사이트 생성기 호스트 요약 참고

Intro - 소개

최근 JAMStack을 사용해 간단한 웹사이트를 개발하게 되었다.

부트캠프 중 roto가 인디스트릿이라는 사이드프로젝트를 JAMStack을 통해 성공적으로 운영하고 있는 사례를 공유할 때도 매우 흥미롭다고 생각하였는데, 이번 기회에 JAMStack을 공부해보고 실제 개발까지 진행해볼 것이다!

JAM Stack은 특정한 기술이 아닌 “개발 방법론”으로 Javascript 와 API 그리고 Markup 으로 웹사이트를 구성하는 것을 의미한다.

JAMStack은 Contents와 View의 분리에 그 핵심이 있다.

서버와 데이터베이스를 Headless CMS 및 Serverless Function을 통해 API로 대체함으로써 Contents를 독립적으로 유지한다.

클라이언트에서는 build 시점에서 컨텐츠를 반영하여 미리 만들어진 정적 페이지를 CDN을 통해 접근할 수 있다.

Why - 잼스택의 등장배경

대세가 된 SPA와 치명적인 단점

처음 한 번 만 리소스(Html,Css,Javascript)를 받고, 이후에는 데이터 요청을 통해 필요한 부분만을 동적으로 바꿔주는 SPA(Single Page Application) 방식은 React, Vue, Angular 등과 함께 정말 빠르게 대세로 자리 잡았다. 그러나 SPA 방식에 치명적인 단점이 존재했는데, 1) 초기 로딩 속도와 2) 검색엔진 최적화(SEO) 였다.

초기에 필요한 모든 정적 리소스를 한 번에 다운로드하기 때문에 초기 로딩 속도가 느렸고, 다운로드 이후 js가 동작하며 html이 만들어지기 때문에 검색엔진의 웹 크롤러들이 meta tag들을 올바르게 수집하지 못하는 SEO 문제를 가지고 있었다. (~~현재 크롬 엔진은 개선했다고 한다만~~)

특히 검색 엔진에 노출되는 문제는 비즈니스와 직결되는 부분으로 반드시 해결이 필요한 부분이었다.

“SPA 장점을 살리면서 SEO도 같이 챙길 수 있는 방법”

이러한 흐름에서 등장한 첫 번째 방향은 “SSR과 CSR의 혼합”이다. 첫 페이지는 SSR(Server Side Rendering)을 통해 meta tag를 가지고 완성된 HTML을 받아와 보여주고, 이후에는 기존 SPA방식과 같이 Javascript를 통해 Client에서 동적으로 처리하는 하이브리드 방식이다. NextJS, NuxtJS 등의 프레임워크들을 통해 보다 쉽게 초기로딩 및 SEO 문제를 해결할 수 있게 되었다.

또 다른 방향이 오늘의 주제인 “JAMStack”이다. JAMStack은 정적인 사이트를 만드는 것에 집중하는데, 이를 통해 자연스럽게 초기로딩 속도 및 SEO 문제를 해결할 수 있다. blog와 같이 고정된 컨텐츠를 가지는 사이트의 경우, 컨텐츠에 해당 하는 모든 페이지들을 미리 생성해두어 제공하는 방식이다. 즉 build시에 이미 정적 페이지들이 완성되어 서버에 올라가 있고, 요청에 맞는 페이지만을 보여주는 방식인 것이다. 각 정적페이지 생성 시에 meta 태그를 반영할 수 있고, 이미 HTML이 완성되어 있기 때문에 초기 로딩 속도 문제가 해결되는 것이다.