Static Site Generator에 대해서 아시나요?

면접용

Static Site Generator(SSG)는 웹사이트를 미리 정적 HTML 파일로 생성하여 배포하는 방식입니다. 이는 페이지를 사전에 렌더링하여 서버에 저장하고, 사용자 요청 시 즉시 전달하는 구조로 작동합니다.

SSG는 빠른 로딩 속도와 SEO 최적화를 제공하며, 서버에서 실시간 처리를 최소화하여 보안성을 높이는 장점이 있습니다. 또한 시스템이 단순하고 유지보수가 용이하여 효율적인 관리가 가능합니다.

대표적인 SSG 도구로는 Gatsby와 Next.js의 SSG 기능이 있습니다. 예를 들어, Gatsby는 React 기반의 애플리케이션을 정적 HTML 파일로 변환해 배포할 수 있어 빠르고 안정적인 사용자 경험을 제공합니다.

동적 데이터는 JavaScript를 활용하여 클라이언트 측에서 처리 가능하기 때문에, 최신 뉴스나 실시간 데이터가 필요한 경우에도 SSG와의 조합이 가능합니다. 이는 정적 사이트의 효율성과 동적 콘텐츠의 유연성을 동시에 구현할 수 있습니다.

---

개념 설명

SSG란 무엇인가요?

Static Site Generator의 약자로, 정적 웹사이트를 미리 생성하고 배포하는 도구⇒서버에 페이지를 미리 생성하여 배포하며, 사용자가 접속할 때 빠른 속도로 웹사이트를 제공합니다.

이것은 마치 책을 미리 인쇄하여 서점에 배치하는 것과 비슷합니다.

핵심 개념: 동적 vs 정적 웹사이트

동적 웹사이트

동적 웹사이트는 서버가 실시간으로 데이터를 처리하고, 그에 맞는 페이지를 실시간으로 생성하여 사용자에게 전달합니다.

• 동적 페이지는 매번 서버에서 렌더링되므로 속도가 느려질 수 있고, 보안 이슈도 발생할 수 있습니다.

예시: 동적 웹사이트 업데이트

app.get('/news', (req, res) => {
  fetchLatestNews()
    .then(news => {
      res.render('newsPage', { news });
    });
});

정적 웹사이트 (SSG)

SSG에서는 미리 페이지를 생성하여 서버에 배포합니다.

• 정적 페이지는 빠르게 로딩합니다.

• 동적인 부분은 자바스크립트를 이용해 처리 가능합니다.

SSG로 웹사이트 만들기

1. 웹사이트 디자인하기

• React와 같은 라이브러리를 사용하여 웹사이트를 디자인합니다.

• 페이지의 콘텐츠와 레이아웃을 미리 작성합니다.

2. 페이지 미리 생성하기

• SSG 도구를 사용하여 HTML 파일을 미리 생성합니다.

• 페이지에 포함할 콘텐츠 (텍스트, 이미지, 비디오 등)을 모두 삽입합니다.

3.배포하기

• 생성된 HTML 파일을 서버에 배포합니다.

• 사용자는 페이지를 빠르게 로딩하고, 미리 준비된 콘텐츠를 즉시 볼 수 있습니다.

4. 동적 콘텐츠 처리하기

• 최신 뉴스나 날씨 정보와 같은 동적 콘텐츠는 자바스크립트를 통해 처리합니다.

• SSG의 정적 페이지는 변경되지 않는 콘텐츠를 다루고, 변동성이 있는 콘텐츠는 클라이언트 측에서 처리합니다.

SSG 도구 예시

• Gatsby, Hugo, Jekyll 등 대표적인 SSG 도구들입니다.

  • 이 도구들을 사용하면 미리 HTML 파일을 생성하고 빠르게 배포 가능합니다.

React와 Gatsby의 결합

React + Gatsby의 활용

• React로 만든 웹 애플리케이션을 Gatsby로 처리하면, React 코드 기반으로 정적 사이트를 생성 가능합니다.

• Gatsby는 정적 HTML 파일을 미리 빌드하여 배포하므로, 사용자는 즉시 빠른 페이지 로딩을 경험할 수 있습니다.

1. React로 만든 웹 애플리케이션을 정적으로 생성:

   • React를 사용하여 페이지를 개발하고, Gatsby는 이 페이지를 미리 렌더링된 HTML로 변환하여 서버에 배포합니다.

2. 동적 콘텐츠 처리:

   • Gatsby는 주로 정적 콘텐츠를 다루지만, 서버에서 데이터를 받아오는 등의 동적 요소도 처리할 수 있습니다.

동적 콘텐츠 처리

• 동적 콘텐츠는 자바스크립트로 처리할 수 있습니다.

import  { useEffect, useState } from 'react';

export default function NewsPage() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    fetch('/api/news')
      .then(response => response.json())
      .then(data => setNews(data));
  }, []);

  return (
    <div>
      <h1>Latest News</h1>
      <ul>
        {news.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

• 정적 페이지에서 동적 콘텐츠를 자바스크립트로 처리하여 변경될 수 있는 콘텐츠를 다룰 수 있습니다.

SSG를 사용할 때의 장점

1. 빠른 로딩 속도: 미리 만들어진 HTML 파일을 서버에 배포하고, 사용자는 이를 바로 볼 수 있기 때문에 로딩 속도가 빠름니다.

2. SEO 최적화: 미리 렌더링된 HTML 페이지는 검색엔진에서 쉽게 크롤링되어 검색 최적화가 잘됩니다.

3. 보안성: 서버에서 실시간으로 처리하는 데이터가 적어 보안이 강화됩니다.

4. 유지보수 용이성: 정적인 파일들을 관리하기 때문에 시스템이 단순하고 유지보수가 쉬운 장점이 있습니다.