SSG & JAMstack

Static website란 무엇인가?

• Static Website

  • 하나 이상의 정적 웹페이지로 이루어져 있는 사이트

• Static Webpage

  • 브라우저에서 동일한 방식으로 로드 되는 HTML 파일

정적 사이트(Static Website)는 서버 또는 CDN에 저장된 사전 빌드(pre-built)된 HTML을 제공한다. 즉, 브라우저에 빠르게 로드될 수 있는 상태다.

Static Webpage vs. Dynamic Webpage

• 정적인 웹페이지는 단순한 HTML로 되어 있다. 브라우저에서 로드될 필요가 없어 빠르게 로드될 수 있다. 사용자가 페이지를 요청할 때마다 웹 서버에서 바로 제공된다.
• 동적 웹사이트는 사용자가 요청할 때마다 데이터베이스와 서버 측 코드를 통해 페이지를 생성하고 반환한다. 웹 서버 또는 사용자 브라우저 내에서 코드가 실행되어야 하므로 느리게 노드될 수 있다.

정적 웹사이트의 일종인 JAMstack(아래서 설명) 웹사이트도 새로운 정적인 콘텐츠를 생성하거나 API를 호출해 콘텐츠를 업데이트함으로써 동적이고 개인화된 경험을 제공할 수 있다.

SSG(Static Site Generator)란 무엇인가?

원시 데이터(raw data)와 템플릿을 이용하여 미리 제작된 HTML 페이지를 생성하는 도구

• SSG는 사전에 웹 사이트의 페이지를 미리 생성하여 HTML, CSS, JavaScript 파일 등을 생성한다. 생성된 파일은 웹 서버에 업로드되며, 사용자가 페이지를 요청할 때마다 웹 서버에서 바로 제공된다.

• SSG를 사용하면 빠른 페이지 로딩 속도와 보안성을 확보할 수 있으며, 배포 및 관리가 쉽다.

SSG vs. CMS

모두 웹사이트를 만들기 위한 기술이지만, 각각의 장단점과 사용 목적이 다르다.

CMS(Content Management Systems)

• 장점

  • 사용하기 쉽고 직관적인 인터페이스를 제공하여 비전문가도 쉽게 웹사이트를 구축하고 관리할 수 있다.
  • 컨텐츠의 추가/수정/삭제가 용이해 다양한 플러그인과 모듈을 이용하여 확장성이 높은 웹사이트를 구축할 수 있다.
  • 사용자 권한 설정, 워크플로 프로세스 관리 등 다양한 기능을 제공한다.

• 단점

  • 불필요한 기능으로 인해 복잡성이 증가할 수 있다.
  • 데이터베이스에 저장된 콘텐츠를 불러오기 때문에, 대규모 트래픽에서 서버 부하가 발생할 수 있다.

• 언제 사용할까?

  • 컨텐츠 작성 및 수정이 필요한 경우 (블로그, 뉴스 사이트 등)
  • 비즈니스 웹사이트나 이커머스 사이트처럼 많은 데이터베이스 쿼리가 필요한 경우
  • 다양한 기능을 포함하고 사용자 수가 많은 경우

• 주요 서비스

  • WordPress, Drupal, Joomla, Magento

SSG(Static Site Generator)

• 장점

  • on demand 방식이 아니라 미리 웹페이지를 생성하기 때문에 로드 속도가 빠르다.
  • 개발자가 원하는 템플릿을 만들 수 있다. CMS에서 제공하는 필드나 기본 제공 템플릿에 제한받지 않는다.
  • 데이터베이스가 없기 때문에 속도가 빠르고, 서버 부하가 적으며 보안상 이점이 있다.
  • 개발자가 컨텐츠의 모든 측면을 제어할 수 있어 커스터마이징이 용이하다.
  • 정적인 파일로 웹사이트를 미리 빌드할 수 있어 호스팅 비용이 저렴하다.
  • 사이트가 정적이므로 복잡한 서버 측 인프라(데이터베이스 트래픽, 백업, 서버 및 로드 밸런서 등...)를 관리할 필요가 없어 빠르고 안전하며 유지 관리가 쉽다.
  • 버전 관리, 자동화된 테스트, 지속적인 배포로 콘텐츠 변경 사항을 관리하고 추적할 수 있다.

• 단점

  • 컨텐츠를 업데이트하려면 매번 새로운 빌드를 해야 하므로 작업량이 증가할 수 있다.
  • SSG는 일반적으로 개발자가 사용하는 도구로, CMS에서 제공하는 사용자 친화적인 인터페이스와 기능을 제공하지 않는다. 따라서 비전문가가 SSG를 사용하여 웹사이트를 업데이트하기 어려울 수 있다.

• 언제 사용할까?

  • 정적인 콘텐츠가 많은 웹사이트 (블로그, 포트폴리오, 문서 등)
  • SEO가 중요한 웹사이트 (HTML,CSS,JavaScript 코드를 정밀하게 제어 가능)
  • 간단하고 빠른 웹사이트를 필요로 하는 경우

• 주요 서비스

  • Jekyll, Gatsby, Hugo, Next.js, Eleventy

JAMstack

JAMstack은 "JavaScript, APIs, Markup"의 약자로, SSG와 같은 기술들을 이용하여 빠르고 안전하며 확장 가능한 웹 사이트를 구축하는 방법론이다.

JAMstack 아키텍처

데이터베이스나 서버를 사용할 필요 없이 JavaScript, API 및 Markup을 사용하는 아키텍처

• JAMstack 아키텍처에서는 프론트엔드와 백엔드가 분리되며, 프론트엔드는 HTML, CSS 및 JavaScript로 구성되고 백엔드는 JSON 또는 XML을 반환하는 콘텐츠 API를 기반으로 한다.

• API를 사용하면 백엔드에 대한 마이크로서비스 접근 방식을 취할 수 있다. JAMstack 애플리케이션은 필요할 때 다양한 API를 호출하지만 그 외의 백엔드 지원은 필요하지 않으므로, 자체 백엔드 애플리케이션을 구축할 필요가 없다.

• Appendix. 데이터베이스에 기반한 CMS 방식의 아키텍처는 프론트엔드와 백엔드가 밀접하게 결합되어 있다. 이를 모놀리식(monolithic) 아키텍처라고도 한다.

JAMstack과 SSG

• JAMstack은 SSG를 기반으로 웹 사이트를 만든 다음, JavaScript와 API를 이용하여 사이트의 기능과 상호작용을 추가한다. 이렇게 생성된 정적 파일들은 CDN(Content Delivery Network)을 통해 전 세계적으로 빠르게 제공된다.

JAMstack 아키텍처의 장점

정적인 HTML 파일을 CDN에 저장하여 더 빠른 사용자 경험과 개발자 경험을 제공한다.

성능과 속도

• 대부분의 콘텐츠가 CDN에서 제공되는 정적 HTML 파일로 구성되기 때문에 사용자에게 웹 콘텐츠를 빠르게 전송할 수 있다.
• 결과적으로 모놀리식 아키텍처를 사용하는 사이트보다 더 빠르게 렌더링되고 로드된다.

확장성

• 정적 파일이므로 어디에서나 호스팅할 수 있다.
• 애플리케이션은 확장 가능하기 때문에 사용량이 크게 증가하더라도 대응하기 좋다.
• 프론트엔드는 빠르며 백엔드는 가벼워서 더 쉽게 확장할 수 있다.

개발자 경험

• 백엔드에 대해 잘 몰라도 사이트를 구축할 수 있다.
• 백엔드는 API 구축에 집중할 수 있다.
• 또한 분리된 개발 팀이 병렬로 작업할 수 있어서 개발 프로세스가 효율적이며 더 많은 기능을 빠르게 구현할 수 있다.
  

보안

• 데이터베이스나 소프트웨어 계층을 사용하지 않기 때문에 SQL Injection 공격으로부터 안전하다.
• 또한 페이지가 미리 컴파일되기 때문에 서버 측 Code Injection 공격으로부터 안전하다.
  

Reference

Static Site Generator
Gatsby : Static Site Generator
Gatsby : JAMstack
JAMstack
What is JAMstack