Q. Static Site Generator란?

❓SSG(Static Site Generator)란?

- 정적 웹사이트를 생성하기 위해 사용되는 도구

- 정적 웹사이투는 서버 사이드에서 동적으로 콘텐츠를 생성하고 데이터베이스 호출을 하지 않는 대신, 사전에 빌드 과정을 거쳐 HTML, CSS, JavaScript 같은 정적 파일들로 변환됨

- 이 파일들은 CDN(Content Delivery Network)과 같은 정적 파일 서버에 호스팅 되어 사용자에게 전달됨

❓SSG 장점

ⅰ) 보안 -> 데이터베이스나 서버 사이드 코드가 없기 때문에 보안 취약점이 상대적으로 적음

ⅱ) 속도 -> 모든 페이지가 사전에 생성되어 있으므로, 서버 사이드 처리가 필요 없어 로딩 시간이 빠름

ⅲ) 확장성 -> 트래픽이 증가하더라도, 장적 파일을 제공하는 것은 동적 콘텐츠를 제공하는 것보다 부담이 적어서 더 쉽게 확장할 수 있음

ⅳ) 호스팅 비용 -> 정적 파일은 간단한 서버 설정으로 제공할 수 있기 때문에, 비용이 절감될 수 잇음

ⅴ) 버전 관리 -> 콘텐츠가 파일로 관리되므로, 버전 관리 시스템을 통해 변경 사항을 추적하고 관리하기 쉬움

❓ 대표적인 SSG

- Jekyll : Ruby로 작성되었으며, GitHub Pages와 통합되어 쉽게 사용할 수 있음

- Gatsby : React를 기반으로 하며, 최신 웹 기술과 함께 정적 사이트 생성에 최적화되어 있음

- Hugo : Go 언어로 작성되어 속도가 매우 빠르며, 대규모 사이트에 적절함

- Next.js : React 기반 SSG이자 서버 사이드 렌더링(SSR)도 지원하는 하이브리드 프레임워크

- Nuxt.js : Vue.js 기반의 프레임워크로, 정적 사이트 생성 뿐만 아니라 SSR도 지원함

🔑  결론

SSG를 사용하면 개발자는 마크다운, 데이터 파일 등을 작성하고 이를 SSG가 HTML로 변환하도록 설정하면 됨.
변환 과정에서 템플릿, 스타일시트, 스크립트가 적용되어 최종 결과물이 생성됨.
그러나 모든 상황에서 정적 사이트가 최선의 선택은 아님.
사용자 인터랙션을 많이 요구하거나, 실시간으로 업데이트되는 콘텐츠가 필요한 웹사이트의 경우에는 서버 사이드 렌더링이나 SPA(Single-Page Application) 접근 방식이 더 적합할 수 있음.

SSG 또는 Static Site Generator는 정적 웹사이트를 생성하는 도구입니다. 이 도구들은 사이트의 콘텐츠를 정적 파일들, 즉 사전에 빌드된 HTML, CSS, JavaScript 파일로 변환합니다. 이렇게 생성된 정적 파일들은 CDN과 같은 서비스를 통해 호스팅되어 사용자에게 빠르고 안전하게 제공됩니다.
SSG의 장점은 다음과 같습니다.
첫번째로는 보안적인 측면입니다. 서버 사이드 코드나 데이터베이스를 사용하지 않으므로 보안 위험이 줄어듭니다.
두번째로는 속도적인 측면입니다. 사전에 생성된 페이지들은 서버 처리 시간 없이 즉시 제공되기 때문에 로딩 속도가 매우 빠릅니다.
세번째로는 확장성입니다. 정적 파일들은 트래픽 증가에 따른 서버 부담이 적기 때문에 확징이 용이합니다.
마지막으로는 버전 관리 측면입니다. 파일 기반의 콘텐츠 관리로 인해, 변경 사항을 쉽게 추적하고 관리할 수 있습니다.
대표적인 SSG로는 Jekyll, Gatsby, Hugo, Next.js, 그리고 Nuxt.js 등이 있으며 각각 특정 기술 스택에 최적화되어 있습니다. 예를 들어, Jekyll은 Ruby로 작성되어 GitHub Pages와 잘 통합되고, Gatsby는 React 기반으로 최신 웹 기술을 활용합니다.
SSG는 마크다운이나 데이터 파일을 작성하고 이를 정적 페이지로 변환하는 과정을 단순화합니다. 템플릿과 스타일시트를 적용하여 사이트를 빌드하며, 결과물은 최종적으로 배포될 준비가 됩니다.
하지만, 정적 사이트가 모든 상황에 적합한 것은 아닙니다. 실시간 콘텐츠 업데이트나 상호 작용이 많은 사이트의 경우, 서버 사이드 렌더링이나 SPA 같은 다른 접근법이 더 적합할 수 있습니다.