4 Types of Web Rendering Strategies - SSG, SSR, ISR, CSR

이 포스팅은 Vercel Next.js - Rendering Strategies 문서를 참고하여 작성되었습니다.

 

1. [SSG] Static Site Generation

Static Site Generation은 빌드 시점에 HTML파일을 생성하는 전략이다.
생성된 HTML 파일은 페이지 요청에 대응할 때 사용된다.

SSG 방식은 여러 렌더링 전략 중에 SEO에 가장 적합하다.
pre-rendered 되었기 때문에 페이지 로드에 필요한 모든 HTML 파일을 가지고 있을 뿐만 아니라, SEO 랭킹의 요인 중 하나인 페이지 성능에도 도움이 되기 때문이다.

 

2. [SSR] Server-Side Rendering

SSG처럼 Server-Side Rendering 방식은 SEO에 긍정적 요소인 pre-rendered 으로 동작한다.
SSG에서 빌드 시점에 파일을 생성한 것과 달리, SSR 방식에서 HTML 파일은 요청이 발생한 시점에 생성된다.
이 같은 방식은 페이지의 구성이 매우 동적일 때 유리하다.

 

3. [ISR] Incremental Static Regeneration

만약 굉장히 많은 양의 페이지를 가지고 있다면, 필요한 모든 파일을 빌드할 때 생성하는 것은 실행가능성이 낮다.
Next.js에서 제공하는 Incremental Static Regeneration 전략은 웹 사이트가 구축된 이후 static 페이지를 만들거나 업데이트할 수 있도록 지원한다.

Incremental Static Regeneration은 개발자나 편집자가 사이트 전체를 다시 빌드할 필요없이 페이지 단위로 정적 파일을 만들 수 있다. ISR 전략을 사용하면 정적 파일의 장점은 유지하면서 수백만 페이지까지 규모를 확장할 수 있다.

 

4. [CSR] Client-Side Rendering

Client-Side Rendering을 사용하면 개발자가 전체 웹사이트를 JavaScript로 웹 브라우저에 렌더링할 수 있다.
초기 페이지 로드 시 일반적으로 JavaScript를 가져와서 브라우저가 모든 내용을 컴파일할 때까지 콘텐츠가 거의 또는 전혀 없는 단일 HTML 파일이 보여진다.

첫 렌더링에 대한 동작 방식 때문에 일반적으로 Client-Side Rendering은 SEO 최적화에 적합하지 않다.
CSR방식은 대량의 데이터 대시보드나 회원관리 페이지, 또는 검색 엔진 인덱스에 포함할 필요가 없는 모든 페이지에 적합하다.

 

5. 정리

SEO의 가장 중요한 점은 페이지를 그리는데 필요한 데이터와 메타데이터가 JavaScript 없이 가져올 수 있는가이다.
위에 나열한 4가지 전략 중에선 SSG와 SSR이 가장 좋은 선택지이다.

Next.js의 중요 장점 중 하나는 각각의 4가지 렌더링 전략을 페이지 단위로 다룰 수 있다는 점이다.