SPA(Single Page Application)의 부흥
Create React App (CRA) 를 통해 복잡한 초기 세팅 없이 React 기반의 SPA 사이트를 쉽게 만들 수 있게 되었습니다. 이런 편리함은 React 기반 웹 프로젝트 확산에 큰 기여를 했지만, 좋은 점만 있는 것은 아니었습니다. CRA로 빌드한 SPA 웹사이트는 CSR(Client Side Render)로 실행되었고, CSR의 약점도 그대로 물려받았기 때문입니다.
SPA의 단점
1. 초기 로딩 속도 문제
- SPA 웹사이트는 사용자가 "첫 의미 있는 페이지"를 보기까지 시간이 오래 걸립니다.
- React 프로젝트에서 규모가 커질수록 처음에 흰 화면이 오래 나오는 현상을 경험할 수 있습니다.
- SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느립니다.
2. SEO(Search Engine Optimization) 문제
-
SPA로 제작된 웹사이트는 검색엔진 최적화(SEO)에 약합니다.
-
검색엔진의 웹 크롤러들은 JS를 실행하지 못하고 HTML에서만 콘텐츠를 수집하기 때문에, CSR로 실행되는 페이지를 빈 페이지처럼 인식합니다.
-
정보가 넘쳐나는 현대 사회에서 "어떻게 하면 검색엔진에 잘 노출될 것인가?"는 중요한 문제입니다.
해결책: SSR과 JAMstack
"SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까?"
이를 위한 방안으로 React 개발자 사이에서 CSR에 SSR을 접목시킨 Next.js가 인기를 끌었고, 최근에는 Next.js만큼 주목받는 것이 있습니다.
바로 JAMstack입니다.
JAMstack이란?
JAMstack은 프런트엔드 웹 개발 방식으로, 정적 웹 사이트를 빠르게 제작하고 사용자에게 효율적으로 제공하는 접근 방식입니다.
JAMstack 애플리케이션에서는 가능한 한 많은 HTML을 미리 구축하여 콘텐츠 전송 네트워크(CDN) 에 저장합니다. 동적 콘텐츠를 생성하기 위해 서버 측에서 모놀리식 백엔드 애플리케이션을 실행하는 대신, 애플리케이션의 동적 구성 요소는 API 를 기반으로 합니다. 이를 통해 사용자경험은 더 빠르고, 개발자경험은 더 단순해집니다.
JAMstack의 구성 요소
📌JAMstack의 'JAM'은 JavaScript, API, Markup 을 의미합니다.
JavaScript: 클라이언트 측 기능을 담당하는 프로그래밍 언어
- Client의 모든 처리는 Javascript가 수행합니다.
API: 다른 프로그램이나 애플리케이션에서 데이터를 요청하는 인터페이스
- 모든 기능 및 비지니스 로직은 재사용 가능한 API가 처리합니다.
Markup: 브라우저에 서식 정보를 제공하는 HTML과 CSS
- 여기서 핵심은 Markup인데 , 만드는 방법은 여러 가지가 있다!
- HTML을 직접 작성한다
- Template Engine 와 같은 툴을 사용한다.
- 정적 사이트 생성기(Static Site Generator, SSG)를 이용해서 Static HTML을 생성한다.
ex) Gatsby, Next.js, Gridsome, Nuxt.js, Hugo, Jekyll 등
이렇게 만들어진 Static HTML은 웹 서버의 리소스를 사용할 필요없이 사용자에게 HTML만 전달해주면 됩니다. Static HTML은 CDN을 통해서 Cache하고 배포해서 빠른 속도를 유지하고, 따로 동적으로 HTML을 생성하지 않기 때문에 웹서버가 필요없어서 서버 비용이 크지 않습니다.
(하지만 모든 HTML을 Static HTML로 만들라는 뜻은 아닙니다.모든 Markup 을 정적으로 유지하게 되면, 최신 데이터를 유지하기 어렵기 때문입니다.)
JAMstack vs 전통적인 웹 개발
예제 ) 유럽 축구 경기 결과를 업데이트하는 웹 애플리케이션
❌ 기존 방식
- 서버에서 실행되는 백엔드 애플리케이션이 지속적으로 최신 점수를 확인.
- 사용자가 페이지를 요청하면 서버가 HTML을 생성 하여 사용자에게 전달.
- 서버가 실행되고 HTML이 생성될 때까지 대기 시간이 발생.
➡️ 결과: 속도가 느리고, 백엔드 유지 관리가 필요함.
✅ JAMstack 방식
- HTML을 사전 생성 하여 CDN에 저장.
- 사용자가 페이지를 요청하면 가까운 CDN에서 즉시 전송.
- 최신 점수는 API 호출을 통해 실시간으로 업데이트.
➡️ 결과: 빠른 로딩 속도 + 백엔드 유지 보수 감소
JAMstack 애플리케이션의 백엔드 처리 방식
JAMstack에서는 서버가 아닌 API를 활용 하여 백엔드 기능을 처리합니다.
기존 방식: 개발자가 직접 백엔드 애플리케이션을 구축 및 유지보수.
JAMstack 방식: API를 활용하여 백엔드를 대체하거나 필요한 경우 API를 직접 제작.
마이크로서비스와의 관계
JAMstack은 API 기반이므로, 마이크로서비스 아키텍처 와 밀접한 관련이 있습니다.
- 필요할 때만 API를 호출하여 서버 자원을 절약.
- 특정 기능별로 독립적인 API를 활용하여 유지보수가 쉬움.
- 서버리스(Serverless) 환경과 결합하여 효율적인 백엔드 운영 가능.
JAMstack의 장점
⭐️ 성능 향상: CDN에서 제공되는 정적 HTML 파일을 활용하여 빠른 로딩 속도 제공.
⭐️ 확장성: 프런트엔드는 가볍고, 백엔드는 API 호출 방식으로 유연하게 확장 가능.
⭐️ 개발자 경험 개선: 백엔드 유지 관리 부담을 줄이고, 프런트엔드 개발에 집중 가능.
⭐️ 보안 강화: 서버 측 공격에 취약한 전통적인 백엔드 구조를 배제하여 보안성 향상.
