![[그림 6-1] SSG의 동작 과정](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c626958c-fc67-4003-8ffc-4aca80ae02a9/Untitled.png)
CSR과 SSR은 서로 반대되는 특성을 가지며 한 렌더링 방식의 장점은 곧 다른 렌더링 방식의 단점으로 이어지는 것을 확인할 수 있었습니다. 완벽한 렌더링 방식이란 없으며 해당 렌더링 방식에서 벗어난 방식을 고려하게 되었습니다. 특히 필요에 따라 정적 페이지의 효과적인 전달을 위한 SSG와 SSG의 한계를 극복하기 위한 ISR과 같은 방식을 도입하게 되었습니다.
SSG는 Static Site Generation의 약자로 빌드 시점에 HTML을 생성하는 방식입니다. 미리 모든 URL에 대한 HTML을 생성해 웹 서버에 저장하고, 사용자의 요청이 발생하면 생성 완료된 정적 페이지를 반환합니다. 모든 정적 페이지는 *CDN(Content Delivery Network)에 저장되며 페이지 요청이 들어오면 CDN의 *엣지 캐싱(Edge Caching) 서버를 통해 해당 URL에 대한 정적 페이지가 즉각적으로 사용자에게 전달됩니다.[1]
[그림 6-1] SSG의 동작 과정
<aside> 🔍 CDN(Content Delivery Network)
CDN은 ****사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크로 물리적 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 콘텐츠 서버를 두는 기술을 의미합니다.[2] 새 요청이 들어오면, 사용자로부터 가장 가까운 CDN이 캐싱 된 결과와 함께 응답합니다. CDN은 사용자에게 콘텐츠를 전달할 때 높은 사용성과 효율을 제공하기 위해 사용합니다.[3]
</aside>
<aside> 🔍 엣지 캐싱(Edge Caching)
주로 CDN에서 사용되는 캐싱 기술로, 데이터를 사용자와 더 가까운 서버에 저장하여 데이터를 더 빠르게 가져올 수 있도록 합니다.[4]
</aside>
SSG는 SSR과 마찬가지로 서버 측에서 페이지를 사전에 렌더링하여 클라이언트에게 전달합니다. 그러나 SSR에서는 사용자 요청에 따라 HTML이 생성된다면, SSG에서 빌드 시점에 HTML이 생성되고 각각의 요청에서 재사용됩니다. 서버가 매번 요청마다 동적으로 페이지를 생성하지 않기 때문에 SSG는 SSR에 비해 성능이 빠릅니다. 이러한 성능상의 이점으로 SSR와 SSG를 모두 지원하는 React 기반 프레임워크인 Next.js의 경우 SSG 사용을 권장합니다.[5]
빌드 시점에 생성된 정적 페이지로 인해 SSG의 장단점은 극명하게 나뉩니다.
SSG는 빠르고 일정한 페이지 로딩 속도와 SEO에 이점을 가지고 있습니다.
SSG는 사전에 페이지를 빌드 해 정적 페이지를 생성합니다. 정적 페이지가 요청마다 재생성되지 않고 이미 준비된 페이지를 CDN에 저장하여 이를 재사용하는 형태로 동작하기 때문에 빠르게 페이지를 사용자에게 제공할 수 있습니다. 정적 페이지가 미리 생성되어 있기 때문에 사용자의 요청이 들어왔을 때 추가 작업이 필요하지 않고 이에 따른 지연이 없습니다. 즉 SSG를 사용하면 페이지 로딩 속도가 단축될 뿐만 아니라 일관되게 유지되어 높은 사용성과 일관된 사용자 경험을 제공할 수 있습니다. 페이지를 동적으로 렌더링할 필요 없이 CDN에서 제공하는 정적 페이지를 수신 받기 때문에 컴퓨팅 리소스와 비용을 절약할 수도 있습니다.
또한 빌드 시점에 이미 HTML이 생성되어 크롤러 봇이 쉽게 페이지를 인덱싱할 수 있기 때문에 SEO에 유리한 특징을 가지고 있습니다.