SPA(Single Page Application)의 부흥
Create React App (CRA)를 통해 복잡한 초기 세팅이 없이 React 기반의 SPA 사이트를 쉽게 만들수 있게 되었다. 이런 편리함은 React 기반 웹 프로젝트 확산에 큰 기여를 했지만 좋은 점만 있지는 않았다. CRA로 빌드한 SPA 웹사이트는 CSR(Client Side Render)로 실행되었고, CSR의 약점도 그대로 물려받았기 때문이다. (CSR과 SSR의 개념에 관한 내용은 이 글에서 다루지 않겠다.)
SPA 웹사이트는 사용자가 "첫 의미있는 페이지"를 보기까지 시간이 오래 걸린다. 리액트로 프로젝트를 하다가 규모가 커졌을 때, 처음에 흰 화면이 오래 나오는 현상을 경험한 적이 있을 것이다. SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
더 심각한 것은 두 번째 단점이다. SPA로 된 웹사이트는 검색엔진최적화 SEO(Search Engine Optimization)에 약하다. 검색엔진의 웹크롤러들은 JS를 실행시키지 못하고 html에서만 콘텐츠를 수집하기 때문에, CSR로 실행되는 페이지를 빈 페이지처럼 인식했다. 정보가 과도하게 넘쳐나는 현대 사회에서 "어떻게 하면 검색엔진에 잘 노출될 것인가?"는 너무나도 중요한 문제이고, 결국 개발자들은 이런 고민을 하게 됐다.
"SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까?"
이를 위한 방안으로 리액트 개발자 사이에서 CSR에 SSR을 접목시킨 Next JS가 인기를 끌었고, 얼마 전부터는 Next JS만큼 화두에 뜨겁게 오르는 것이 있다.
바로 오늘의 주제, JAM stack이다.
JAMstack의 기본 개념
엄밀히 말하면 Next JS와 JAMstack은 동일선상에 놓고 비교할 수 없다. Next JS는 특정한 기술이고, JAMstack은 방법론이기 때문이다. 심지어 Next JS가 JAMStack 웹 개발에 사용되는 대표적인 프레임워크이기도 하다. JAMstack은 웹사이트를 어떻게 구성할지에 대한 관점을 제시한다.
JavaScript: Client의 모든 처리는 Javascript가 수행합니다.
API : 모든 기능 및 비지니스 로직은 재사용 가능한 API가 처리합니다.
Markup : SSG(Static Site Generator)나 Template Engine(Webpack 등)을 이용해서 Markup을 미리 생성합니다.
여기서 핵심은 Markup이다.
Markup을 만드는 방법은 여러 가지가 있다.
1.HTML을 직접 작성한다
2.Template Engine 와 같은 툴을 사용한다.
3. 정적 사이트 생성기(Static Site Generator, SSG)를 이용해서 Static HTML을 생성한다.
e.g) Gatsby, Next.js, Gridsome, Nuxt.js, Hugo, Jekyll 등
이렇게 만들어진 Static HTML은 웹 서버의 리소스를 사용할 필요없이 사용자에게 HTML만 전달해주면 된다. Static HTML은 CDN을 통해서 Cache하고 배포해서 빠른 속도를 유지하고, 따로 동적으로 HTML을 생성하지 않기 때문에 웹서버가 필요없어서 서버 비용이 크지 않다.
하지만 모든 HTML을 Static HTML로 만들라는 뜻은 아니다.모든 Markup 을 정적으로 유지하게 되면, 최신 데이터를 유지하기 어렵기 때문이다.
JAMstack의 장점
공식문서에서 말하는 JAMstack의 장점은 다음과 같다.
Better Performance
Jamstack에서는 배포 시점에 페이지를 생성할 수 있습니다. 브라우저가 SPA의 첫 페이지를 스크립트로 렌더링 할 때까지 기다릴 필요가 없다는 것입니다. 첫 번째 바이트가 브라우저에 도달하기까지의 시간(Time To First Bytes: TTFB)을 최소화 할 때, 사전 빌드(pre render)된 파일을 CDN으로 제공하는 것보다 빠른 것은 없다고 합니다.Higher Security
서버 사이드 프로세스를 마이크로 서비스 API로 추상화하면 공격에 노출되는 영역이 줄어듭니다. 이로 인해 웹 애플리케이션에서 발생할 수 있는 보안 부분들에 대해 신경을 덜 쓸 수 있게 됩니다.Cheaper, Easier Scaling
배포된 파일들을 어디든 제공할 수 있어야 하는 경우, 해당 파일을 더 많은 서버에 제공해야 하는데 CDN을 통해 이 부분을 해결할 수 있습니다. 대표적인 CDN 서비스 Akamai는 전세계적으로 약 7만여대의 Cache 서버를 가지고 있습니다. 별도의 스케일링(Scailing) 작업이 필요하지 않으며 서버 관리에 드는 비용도 없어집니다.Better Developer Experience
CDN을 통해 확장이 되고 별도의 서버 관리가 필요하지 않기 때문에 개발자는 보다 개발과 문제 해결에 집중할 수 있습니다.
JAMstack 기반 웹사이트 개발하기
JAMstack의 등장 이유와 장점은 충분히 알아보았다. 그렇다면 JAM stack 기반 웹사이트를 어떻게 만들 수 있을까? 가장 쉽게 따라해볼 수 있는 방법은 gatsbyjs 와 netlify 를 이용해 웹사이트를 구축하는 것이다.
gatsbyjs : React 와 GraphQL 를 이용한 정적 사이트 생성기
netlify : Javascript 코드를 빌드 하고 배포 하고 운영할 수 있게 도와주는 플랫폼
- Github 으로 프로젝트를 관리한다.
- Gatsbyjs (SSG) 로 정적 사이트 생성기를 구축한다.
- Netlify 에 배포 환경을 구성한다.
- GitHub 에 코드가 변경되면, Netlify 에서 빌드를 시작한다.
- Netlify 로 Gatsbyjs 으로 빌드하고, 사이트을 배포한다.
한번 배포된 Package 는 더 이상 빌드를 위한 웹서버의 자원은 필요하지 않게되고, 모든 처리는 Javascript 와 API 에서 이루어지게 된다.
JAM Stack 은 하나의 개념이기 때문에, 특정 라이브러리나 플랫폼을 이용하지 않고, 본인이 직접 빌드툴 혹은 프레임워크를 만들거나, 호스팅 서버나 CDN 을 운영해도 전혀 문제가 없다.
참조
