[Web] SSG, ISR의 개념과 차이점

1. SSG

SSG는 Static Site Generation의 약자로, 정적인 웹사이트를 만들 때 사용한다.

SSR과 똑같이 서버에서 렌더링 하지만 렌더링 되는 시기가 SSR과 다르다. 

 

SSG는 서버에 배포한 후, 빌드할 때 렌더링(html 코드로 변환됨)된다. 

실제 html 파일들은 빌드할 때 미리 만들어 둔다고 생각하면 된다.

 

1) SSG Rendering 방식

서버에 배포 한 후 빌드시 렌더링이 일어나면서 html 파일이 생성된다.

이후 사용자가 홈페이지에 접속하면, 클라이언트가 서버에 요청을 보내고 서버는 만들어준 html 파일을 보내준다.

클라이언트는 받은 데이터를 통해 html을 표기해 준다.

 

2) 장점 

① 페이지 로딩 시간(Time To View)이 짧다

 

② 자바스크립트 필요 없음 

 

③ SEO 최적화에 좋음

 

④ 보안 뛰어남

 

⑤ CDN 캐시 됨

 

html 파일을 서버 측에 미리 만든 후 html 받아오기 때문에 그 후에 서버까지 가지 않아도 cdn에 캐시 된 파일을 가져올 수 있다.

 

3) 단점

① 데이터가 정적임 

 

데이터가 가변적으로 바뀌는 웹사이트에서는 좋지 않다.

 

② 사용자별 정보 제공이 어려움

 

사용자가 한 두 명이라면 해당 사용자에 따라 데이터를 미리 만들어 줄 수 있지만,

그렇지 않은 웹 사이트라면 사용자별 정보를 제공하기 어렵다.

 

즉, 사용자에게 모든 데이터를 동일하게 보여주는 정적인 페이지에는 괜찮지만, 그렇지 않은 곳에선 사용하지 않는 것이 좋다.

 

---

2. ISR

ISR은 Incremental Static Regeneration의 약자로 주기적으로 렌더링 되는 정적 웹사이트이다.

위에서 살펴본 SSG와 같이 정적이지만, 설정한 주기별로 페이지를 다시 생성한다.

 

기본적으로 SSG와 동일한 원리이다. 

 

1) ISR Rendering 방식

서버에 배포한 후 빌드시 렌더링이 일어나면서 html 파일이 생성된다.

이후 사용자가 홈페이지에 접속하면, 클라이언트가 서버에 요청을 보내고 서버는 만들어준 html 파일을 보내준다.

클라이언트는 받은 데이터를 통해 html을 표기해 준다.

 

2) 장점 

① 페이지 로딩 시간(Time To View)이 짧다

 

② 자바스크립트 필요 없음 

 

③ SEO 최적화에 좋음

 

④ 보안 뛰어남

 

⑤ CDN 캐시 됨

 

⑥ 주기별로 데이터를 업데이트할 수 있다.

 

3) 단점

① 실시간 데이터를 받을 수 없음

 

데이터를 주기적으로 변경할 순 있지만, 실시간으로 데이터를 받아오는 것은 불가능하다.

 

② 사용자별 정보 제공이 어려움