(부트캠프에서 Next.js를 배웠던 내가 JAMstack이란 개념을 몰랐다는 것을 반성 또 반성하며...)
📌 SPA(Single Page Application)와 CSR(Client Side Rendering)
보통의 웹은 완성된 Static HTML과 CSS를 네트워크로 전달받아서 화면을 보여준다.
서버가 동적으로 HTML을 생성할 수 있게 되면서 SSR(Server Side Rendering) 개념이 등장했고, 사용자의 요청에 따라 HTML을 만들어서 전달하고 화면을 보여줄 수 있게 되었다.
SSR만으로는 더 많은 HTML 조작이 힘들어지면서, 보조 역할만 하던 Javascript가 jQuery의 만남과 함께 중요한 역할을 차지하게 되었다.
Javascript로 화면을 조작할 일이 많이 생겼고, Javascript와 브라우저 성능이 더욱 발전하여 React, Vue, Angular와 같은 DOM을 조작하기 쉽게 도와주는 라이브러리와 웹 프레임워크가 등장하면서 CSR(Clinet Side Rendering) 개념이 등장하게 되었다.
시대가 발전하고 사용자의 환경이 더욱 발전하면서, 서버 상에서 HTML을 만들어서 전달하는 SSR 보다 클라이언트 상에서 HTML을 만드는 CSR이 서버 비용과 렌더링 속도에서 훨씬 유리한 환경이 되었다.
페이지를 이동할 때마다 HTML을 새로 받아서 그리는 것보다, 필요한 데이터만을 받아와서 Javascript로 화면을 그리는 것이 유리해지면서 극단적으로 거의 정보가 없는 HTML과 매우 큰 Javascript, 분리된 환경의 API만으로 이루어진 SPA(Single Page Application) 환경이 이루어지게 된다.
SPA가 많은 장점을 가지고 있으나, 두 가지의 큰 단점이 있다.
- 사용자가 첫 의미 있는 페이지 (First meaningful paint)를 보게 되기까지 SSR에 비해 시간이 오래 걸린다.
- 검색 엔진이 이해할 수 있던 HTML이 사라지고, Javascript만 존재하게 되면서 검색 엔진 최적화 (SEO, Search Engine Optimization)를 맞추기 어려워졌다.
이러한 단점에도 불구하고 Javascript로 조작하는 환경은 매우 매력적이였고, First meaingful paint와 SEO가 중요했던 개발자들은 SSR과 CSR 혼합 형태를 만들어냈는데, Javascript에서 사용하는 환경을 그대로 이용한 서버인 Angular Universal과 Next.js 그리고 Nuxt.js가 등장하게 된다.
첫 페이지는 SSR 형태로 HTML을 만들어서 보여주고, 이후 모든 화면 조작과 CSR을 Javascript가 처리하게 하는 하이브리드 형태로 발전하게 된다.
이로써 첫 페이지는 완성된 HTML을 전달해주어 First meaningful paint의 속도를 높히고, 검색봇이 HTMl을 크롤링해서 SEO를 대응할 수 있게 된다.
📌 JAMstack
📍 JAMstack이란?
JAMstack은 Javascript, API, Markup Stack의 약자이다.
Javascript와 API, Markup(HTML)만으로 이루어진 웹의 구성을 이야기하는 것으로, SPA와 비슷하지만 다르다.
JAMstack은 React(CSR)와 Next.js(SSR) 같은 특정 기술로 구성된 형태를 이야기 하는 것이 아닌, 이들을 이용해 웹사이트를 어떻게 구성할 것인지의 관점에 대해서 이야기한다.
- Javascript : Client의 모든 처리는 Javascript에게 맡긴다.
- API : 모든 기능 및 비즈니스 로직은 재사용 가능한 API로 추상화한다.
- Markup : SSG(Static Site Generator)나 Template Engine(Webpack 등)을 이용하여 Markup을 미리 생성한다.
Markup을 만들 수 있는 방법은 다양하다.
- HTML 직접 작성하기
- Template Engine과 같은 툴 이용하기
- Next.js, Nuxt.js, Gatsby 등과 같은 정적 사이트 생성기(SSG)를 이용해서 Static HTML을 생성하기
📍 Static HTML을 생성하여 Markup 만들기
미리 작성된 Static HTML은 웹서버의 리소스를 쓸 필요 없이, 사용자에게 HTML만을 전달해주면 된다.
Static HTML을 CDN을 통해 Cache하고 배포하여 빠른 속도를 유지할 수 있다.
또한, 따로 동적으로 HTML을 생성하지 않기 때문에 따로 웹서버가 필요 없어 서버 비용이 높지 않다.
그러나, 모든 HTML이 Static HTML만으로 이루어진다면 최신 데이터를 유지하기 어렵기 때문에 모든 HTML이 Static HTML만으로 이루어진 것을 뜻하진 않는다.
중요한 것은 최대한 HTML을 Build하여 Cache하고 사용자를 위한 First meaningful paint의 속도를 높히는 것이다.
📍 JAMstack 장점
- Better Performance
Jamstack에서는 배포 시점에 페이지를 생성할 수 있다. 즉, 브라우저가 SPA의 첫 페이지를 스크립트로 렌더링할 때까지 기다릴 필요가 없다.
첫 번째 바이트가 브라우저에 도달하기까지의 시간(TTFB, Time To First Bytes)을 최소화할 때 사전 빌드(Pre render)된 파일을 CDN으로 제공하는 것보다 빠른 것은 없다고 한다. - Higher Security
서버 사이드 프로세스를 마이크로 서비스 API로 추상화하면 공격에 노출되는 영역이 줄어든다.
이로 인해 웹 애플리케이션에서 발생할 수 있는 보안 부분들에 대해 신경을 덜 쓸 수 있다. - Cheaper, Easier Scaling
배포된 파일들을 어디든 제공할 수 있어야하는 경우, 해당 파일을 더 많은 서버에 제공해야 하는데 CDN을 통해 이 부분을 해결할 수 있다.
대표적인 CDN 서비스 Akamai는 전세계적으로 약 7만여대의 Cache 서버를 가지고 있다. 별도의 스케일링 작업이 필요하지 않으며, 서버 관리에 드는 비용도 없어진다. - Better Developer Experience
CDN을 통해 확장이 되고 별도의 서버 관리가 필요하지 않기 때문에, 개발자는 보다 개발과 문제 해결에 집중할 수 있다.
📍 JAMstack 과정
JAMstack을 가장 쉽게 따라해볼 수 있는 방법은 Gatsby와 Netlify를 이용해 웹사이트를 구축하는 것이다.
Gatsby는 React와 GraphQL을 이용한 정적 사이트 생성기이다.
Netlify는 Javascript 코드를 빌드하고 배포하고 운영할 수 있게 도와주는 플랫폼이다.
- Github로 프로젝트를 관리한다.
- Gatsby (SSG)로 정적 사이트 생성기를 구축한다.
- Netlify에 배포 환경을 구성한다.
- Github에 코드가 변경되면, Netlify에서 빌드를 시작한다.
- Netlify로 Gatsby를 통해 빌드하고, 사이트를 배포한다.
한 번 배포된 package는 더이상 빌드를 위한 웹서버의 자원은 필요하지 않으므로 모든 처리는 Javascript와 API에서 이루어지게 된다.
JAMstack은 하나의 개념이므로, 특정 라이브러리나 플랫폼을 이용하지 않고 본인이 직접 빌드 툴 혹은 프레임워크를 만들거나 호스팅 서버 또는 CDN을 운영해도 문제가 없다.
< 참고 : https://pks2974.medium.com/jam-stack-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-17dd5c34edf7
https://velog.io/@perfumellim/JAMstack%EC%9D%B4%EB%9E%80 >
