JAM Stack 개념 정리하기

SPA (Single Page Application) 와 CSR (Client Side Rendering)

웹은 보통 완성된 Static HTMLCSS 를 네트워크로 전달 받아서, 화면을 보여준다.

그럼에도, SSR 는 필요하다.

많은 장점을 가지고 있는 SPA 지만, 매우 큰 2가지 단점을 가지고 있는데, 사용자가 첫 의미 있는 페이지 (First meaningful paint) 를 보게 되기까지, SSR 에 비해 오래 걸리고, 검색 엔진이 이해할 수 있던 HTML 이 사라지고, Javascript 만 존재하게 되면서, 검색 엔진 최적화 (Search Engine Optimization, SEO) 를 맞추기가 어려워졌다.

JAM Stack

JAM Stack 은 React(CSR) 와 Next.js(SSR) 같은 특정 기술로 구성된 형태를 이야기하는 것은 아니다.

Markup

세상에는 정말 다양한 Markup 을 만들수 있는 방법이 존재한다.

간단한 JAM Stack 과정

JAM Stack 을 가장 쉽게 따라해볼 수 있는 방법은 gatsbyjsnetlify 를 이용해 웹사이트를 구축하는 것이다.

  1. Github 으로 프로젝트를 관리한다.
  2. Gatsbyjs (SSG) 로 정적 사이트 생성기를 구축한다.
  3. Netlify 에 배포 환경을 구성한다.
  4. GitHub 에 코드가 변경되면, Netlify 에서 빌드를 시작한다.
  5. Netlify 로 Gatsbyjs 으로 빌드하고, 사이트을 배포한다.

마치며

JAM Stack 은 새로운 개념이 아니다.

참고 URL

JAM Stack 을 위한 여러 도구를 설명한다.
https://www.thenewdynamic.org/
https://www.staticgen.com/
https://headlesscms.org/

--

--

Javascript is great We may not be great

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store