Static site generator - SSG 정적 사이트 생성기

렌더링의 마지막 기법으로 SSG 정적 사이트 생성기에 대한 내용을 알아보자.

이 부분은 머 지킬이니 강의에서 언급되는 Gastby 등 여러가지 정적 사이트 생성기 엔진을 알고 있어 어려운 개념은 아니다. 아주 익숙한다.

빌드 당시에 페이지를 만들어 아예 정적 html 페이지 결과를 그냥 올려두고 가져가는 형태이니 Runtime 이라기 보다는 Compile time 빌드라고 생각하면 쉽다.

강의 노트 겸 판서 결과 스샷은 아래를 참고하고,

CDN 서비스 등에는 이 방법이 가장 최적화된 방법으로 생각된다.

물론 실행시에 먼가 데이터를 가져오거나 변경해야 한다면 이 방식은 사용할 수 없다. 특정 고정된 콘텐츠의 경우에는 이 방법이 가장 효율적인 방법일 것이다.

Gastby 말고 SSR에서 언급한 Next.JS 도 이 정적 사이트 기능을 제공한다고 하니 이 부분도 더 공부를 해 봐야겠네.

강의 예에서 보면

장바구니 기능의 경우 사용자가 상품을 넣고 갯수를 변경하고 금액이 바뀌고 하니깐 CSR 방식의 접근이 맞겠고

상품 정보의 경우 SSR 기법을 사용하고

동영상 설명서, 상품 설명서 다운로드 등은 SSG 를 사용해서 서비스를 구성하면 되겠다.....라고 여러가지 상황에 맞춰서 각각 특징을 살려 구현하는 것이 정답!!!!

먼가 정답인듯 정답이 아닌듯...아무튼 렌더링 관련된 3가지 방법은 여기서 이렇게 마무으리~~

브라우저 렌더링 101 - from 조은의 프론트엔드 실무 가이드

크롬 기준의 브라우저 렌더링 101 강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다. 전체적인 개요 같은 내용이다. 먼저 모르는 용어 Render Tree DOM 과 CSS 가 적용된 결과물 정도

kblck.com

클라이언트 사이드 렌더링 CSR

이전 강의에 연속해서 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 클라이언트 사이드 렌더링 CSR 에 관한 내용이다. 브라우저 렌더링 101을 통해 전체적인 느낌을 알고

kblck.com

서버사이드 렌더링 SSR

이제 서버사이드 렌더링 SSR 에 대해서 간략하게 들은 것을 정리해보자 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 이것도 용어에 적힌 대로 이해하면 된다. 서버쪽

kblck.com

Alex Green 님의 사진, 출처: Pexels

티스토리툴바