nesslab이 ssg로 되어져 있음.

컨셉

• 서버사이드 렌더링에 대해서 알아보았을 때 서버 처리 시간이 늘어나는 만큼 TTFB 에 부정적인 영향을 주는 것을 알 수 있었다.
• 클라이언트 사이드 렌더링에서는 자바크스립트 번들 크기가 증가하면 스크립트를 다운로드 받아 처리하는 시간이 증가하게 되어 FCP, LCP, TTI 에 안 좋은 영향을 주었다.

<aside> 🧠 Static Rendering(이하 SSG)는 사이트를 빌드할 때 미리 렌더링해 둔 HTML자체를 서빙하여 이런 문제를 해결한다.

</aside>

static-generation-1.webm

사용자가 액세스할 수 있는 각 경로에 해당하는 정적 HTML 파일이 미리 생성됩니다. (그냥 html 파일을 던지는 것과 똑같음)

이러한 정적 HTML 파일은 웹 서버나 CDN에서 사용할 수 있으며 클라이언트가 요청할 때 가져올 수 있다.

이렇게 생성된 정적 HTML파일들은 캐시가 가능하므로 유연성을 제공한다.

HTML 응답이 미리 생성되므로 서버의 처리 시간이 미미하므로 TTFB가 더 빨라지고 성능이 향상된다.

이상적으로는 클라이언트 측 자바스크립트가 최소화 되고 페이지를 다운로드 받자 마자 인터렉티브가 가능하게 된다. (따로 하이드레이션 필요 X)

기본 구조

패턴의 이름과 같이 정적 렌더링은 로그인 된 사용자를 위한 UI변경 같은 것이 없는 정적 컨텐츠에 적합하다. 따라서 ‘소개', ‘연락처', 블로그 페이지 들이나 온라인 커머스 앱의 상품 페이지들은 정적 페이지가 될 수 있다.

Next.js, Gatsby.js, VuePress와 같은 프레임웍들이 정적 컨텐츠 기능을 지원한다. 일단은 데이터가 필요없는 정적 컨텐츠들을 제공하는 페이지를 만들어보자.

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      {/* ... */}
    </div>
  );
}

사이트가 next build 명령을 통해 빌드될 때 이 페이지는 about.html 파일로 프리렌더 되어 /about 경로에 서빙된다.****