[WEB / NOTE] SSG / SSR

SSG (Static Site Generators)

Next.js

Gatsby (React)

GridSome (Vue)

11ty (JS)

 

SSG 는 Ras Data, template들을 기반으로 static html을 만들어주는 것이다. 

각각의 HTML페이지 도는 것을 코딩하는 작업을 자동화해서 만들어준다. 그리고 그 페이지들을 사용자에게 빠른 시간 안에 전달할 준비를 해준다. 이 HTML페이지는 미리 만들어졌기에 사용자 브라우저에 빠른 전달이 가능한 것이다.

CMS의 대안이다. 

 

CMS(Customer Management System): 웹 컨텐트를 관리하고, 웹 페이지를 생성하고, 템플릿을 실행한다.

템플릿: 재사용이 가능한 유형의 웹 컨텐트, 개발자는 이 템플릿으로 같은 포맷팅 작업을 계속 반복하지 않을 수 있다. 

 

그리고 SSG는 JAMstack 웹 개발 접근의 일종이다. .

 

Static Website

Static website는 모든 시간에 같은 방식으로 한꺼번에 로드되는 단일 혹은 다중 HTML웹페이지의 집합이다.

Static웹페이지는 dynamic웹페이지와 대치된다. dynamic웹페이지는 입력되는 데이터의 모든 변화에 반응해서 load되는 것이다. 그 데이터 예시로는 사용자의 위치, 시간, 행동 등의 변화가 있다. 

Static webpage는 HTML로 단순하게 작성된 파일로 빠르게 로딩되며, dynamic webpage는 Javascript code의 실행을 필요로 한다.

 

SSG vs CMS

https://www.themexpert.com/blog/static-site-generator-vs-cms

Static Site Generator vs CMS Which One to Choose and Why? - ThemeXpert

 

https://velog.io/@kysung95/SSR-vs-CSR-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EC%84%A0%ED%83%9D%EC%9D%80-feat.-ssg

[개발상식]SSR vs CSR 당신의 선택은? (feat. 웹의 변천사)

 

SSR (Serer Side Rendering)