SSR vs SSG vs ISR — 우리 사이트의 분류표

프레임워크가 SSR, SSG, ISR 을 모두 지원하게 된 이후로, 페이지를 만들 때마다 “어떤 방식으로 렌더링할까”라는 선택이 생긴다. 처음엔 각자 다른 기준으로 결정하다 보니 같은 프로젝트 안에서도 방식이 뒤섞였다. 그래서 팀이 합의한 분류 기준을 정리했다.

세 가지 방식의 핵심 차이

SSG(정적 생성): 빌드 타임에 HTML 을 만들어낸다. 배포 이후 내용이 바뀌려면 다시 빌드해야 한다. 가장 빠르고 호스팅 비용이 낮다.

SSR(서버 렌더링): 요청이 들어올 때마다 서버에서 HTML 을 생성한다. 항상 최신 데이터를 반영할 수 있지만, 서버 자원이 필요하고 응답 시간이 SSG 보다 길다.

ISR(점진적 정적 재생성): SSG 와 SSR 의 중간. 정적 파일을 만들되, 일정 주기나 특정 트리거에 따라 재생성한다. Next.js 가 대표적으로 지원한다.

세 가지 질문으로 방식을 결정한다.

1. 데이터가 요청마다 달라지는가? 사용자별로 다른 내용이 보여야 하거나, 실시간 데이터를 반영해야 한다면 SSR. 그렇지 않다면 다음 질문으로.

2. 빌드 주기 안에서 데이터가 바뀌는가? 하루에 몇 번씩 내용이 업데이트되는 페이지라면 매번 빌드하기 어렵다. ISR 로 재생성 주기를 설정하거나, 업데이트 트리거를 연결한다. 내용이 거의 바뀌지 않는다면 다음 질문으로.

3. 빌드 타임에 모든 경로를 알 수 있는가? 가능하다면 SSG 가 기본값이다. 경로를 미리 알 수 없는 동적 콘텐츠라면 ISR 또는 SSR 을 선택한다.

우리가 운영하는 사이트들에 이 기준을 적용하면 이렇게 분류된다.

우리는 새 페이지를 만들 때 특별한 이유가 없으면 SSG 부터 시작한다. 성능과 운영 비용 면에서 가장 유리하고, 나중에 ISR 이나 SSR 로 전환하는 것이 반대 방향보다 쉽다. 처음부터 SSR 로 구현해놓고 “사실 정적으로 충분했네”를 깨닫는 것보다 낫다.

렌더링 방식은 한 번 정하면 바꾸기 번거롭다. 처음 선택할 때 명확한 기준이 있으면 나중에 이유 없는 불일치를 줄일 수 있다.

— by slecs