[Basic] Frontend의 이해 - Static Site Generators

1. Static Site Generators (SSG)

• 웹 사이트를 구축하는 데 사용되는 도구
• 동적으로 콘텐츠를 생성하는 대신 미리 정적인 HTML, CSS, JavaScript 파일을 생성하여 웹 사이트를 구성
• 클라이언트 측에서 정적 파일을 불러와 보여주기 때문에 빠른 페이지 로딩 속도와 보안성을 제공
• SSG의 작동 방식
  • 웹 사이트의 콘텐츠를 Markdown, YAML, JSON 등의 간단한 마크업 언어로 작성해 추가정보 제공
  • 콘텐츠를 HTML로 변환하는데 사용되는 템플릿 엔진을 사용하여 개발 속도 향상
  • 콘텐츠와 템플릿을 결합하여 정적인 HTML 파일을 생성하는 빌드 프로세스를 실행
  • 생성된 정적 파일은 웹 서버에 업로드되거나 CDN (Content Delivery Network)에 배포
  • 사이트를 요청할 때 정적 파일이 빠르게 전송되고, 서버에 부하가 걸리지 않음
• SSG의 주요 장점
  • 정적 파일을 사용하기 때문에 웹 페이지의 로딩 속도가 매우 빠름
  • 서버에서 콘텐츠를 동적으로 생성하는 것과 달리 사용자에게 빠른 응답을 제공
  • 서버 측 코드가 없기 때문에 일반적인 웹 취약점에 대해 더 안전함
  • 정적 파일은 거의 모든 웹 호스팅 서비스에서 지원하며 리소스 사용이 적음
  • 정적 파일로 된 사이트는 검색 엔진 최적화가 더욱 쉬움
• Jekyll, Hugo, Gatsby, Next.js 등이 있음