[20210529] SSG(Static site generator)
웹사이트를 좀더 효율적으로 관리하고 만들어 주는 도구인 SSG를 소개한다.
웹사이트들은 전달하는 내용들이 점점 많아지고 전달하는 방법도 개선되고 있다. 웹 개발 산업 또한 더 효율적으로 사이트들을 유지하고 업데이트하려고 하고 있다. 몇 년 전까지만 하더라도 우리는 웹사이트를 만들기 위해 수작업으로 파일들을 만들었지만 지금은 반복되는 작업을 시스템이 처리하고 있다. 예로, 웹서버가 그런 반복적인 일을 해주고 있다. 웹서버는 사용자의 요청이 있을 때 마다 컨텐츠와 템플릿을 조합하여 사용자에게 보여질 view를 만들어 보낸다.
SSG(Static site generator)?
SSG도 웹서버와 같은 작업을 한다. 하지만 웹서버와의 가장 큰 차이점은 사용자의 요청이 있을 때마다 페이지를 제작하는 것이 아니라, 제공할 페이지들을 런타임 시간이 아닌 빌드 시간에 미리 만들어 둔다는 점이다. 이는 꽤나 효율적인 작업이다. 방문자가 새로운 페이지를 요청할 때마다 요청한 페이지를 렌더링하는 비용을 빌드 시간에 처리해 버리니 새로운 요청때마다 해당 비용이 전혀 들지 않는다.
ssg는 웬만한 프로그래밍 언어에서 다 지원한다.
SSG의 장점 3가지
- Security
해당 요청에 대한 추가적인 처리 없이 요청 페이지를 보내주기만 하기 때문에 보안적 측면에서 매우 안전하다.
There is no server more secure than the one that does not exist.
-
Scale 매 요청마다 응답(페이지)을 만드는게 아니라 만들어진 정적 페이지를 주기만 하면 되기 때문에 아무리 규모가 크더라도 높은 컴퓨터 사양을 요구하지 않는다. SSG는 전통적인 캐싱 구조와 닮았다. 하지만 캐시 레이어를 구성하기 위한 설정(어떤 것을 캐시해둘것인지..)을 필요로 하는 반면 모든것이 캐시되어 있는 ssg이기에 기본적으로 스케일에 최적화 된 구조이다.
- Performance SSG에서 성능에 영향을 미치는 것은 방문자의 요청이 도착하고 응답이 보내어지는 시간이 전부이다. 우리 사이트가 CDN에 배포 될 것인데 사용자와 CDN 사이의 거리가 얼마나 짧냐에 따라 성능이 갈린다. 하지만, 매 요청마다 새로운 페이지를 제작하는 웹 서버와 비교해서는 페이지를 제작하는데 드는 비용이 런타임 시간에는 전혀 들지 않기 때문에 성능은 아주 뛰어나다.
다양한 SSG Tools
그렇다면 많은 SSG 중에 무엇을 써야 하는가?
- 주요 기능이 컨텐츠 전달이라면? Jekyll, Hugo, Nuxt, Elevent
- application과 같은 좀더 복잡한 기능을 가진다면? less about viewing, more aboud doing GatsbyJS, NextJS, SapperJS
- 수천개의 페이지로 구성하고 있다면? build 시간이 영향을 끼칠 것이다. Hugo, Eleventy, Jekyll
출처
https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/