JAM Stack(JavaScript, API, MarkUp Stack)
an architecture designed to make the web faster, more secure, and easier to scale.
자바스크립트와 HTML, CSS, API 기술을 사용하여 웹을 구성한다.
기존 웹사이트와 달리 JAM Stack은 구성 방식이 매우 간단하다.
HTML, CSS, JavaScript와 API로 만들어진 정적인 웹 페이지를 Pre-Render한 걸 CDN을 통해 열람한다.
※ CDN(Content Delivery Network)
CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다. CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치하여 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달한다.
(ex) Netflix
JAM Stack의 장점
-
미리 빌드된 파일을 CDN을 통해 제공하기 때문에 빠르다.(TTFB↓)
*TTFB(Time to First Byte: 서버 응답 시간, 브라우저에서 첫 응답을 받기까지 걸리는 시간) -
API를 통해 정적인 웹 사이트를 생성한다. API는 인터페이스이므로(Polymorphism에서 superclass 개념) 공격 노출 범위가 줄어들어 보안상 보다 안전하다.
-
CDN을 사용하므로 스케일링하기 쉬운 웹사이트를 제공한다.
JAM Stack기반 프레임워크:next, gatsby, nuxt, jekyll
이중 Next.js와 Gatsby는 리액트 기반 프레임워크이다.(nuxt는 자바스크립트, jekyll은 루비)
Next.js: 주로 서버 사이드 렌더링을 위해 사용한다.
*서버 사이드 렌더링: 서버에서 페이지를 그려 클라이언트(브라우저)로 보내면 브라우저에서 화면에 표시하는 기법. 이렇게 클라이언트가 서버에서 요청을 받으면 동적으로 그때마다 웹 페이지를 생성.
Gatsby: 오직 정적 사이트만 생성하기 위해 사용(서버 x)
→ 회사 소개 웹 페이지, 블로그, 포트폴리오 등 서버가 필요없는 곳에 사용
참고: https://www.inflearn.com/course/gatsby-기술블로그/lecture/75995?tab=note&mm=close
