SSR의 한계와 SSG의 등장

SSR에서는 브라우저가 접속 요청을 할 때마다 Next.js 서버가 사전 렌더링을 진행하고 새롭게 생성한 페이지를 브라우저에 전달한다.

SSR로 동작하는 Next.js의 페이지 렌더링 과정

접속요청이 들어올 때마다 SSR은 새 페이지를 생성하므로 최신 데이터를 보장하는 장점이 있다. 그러나 사전 렌더링 과정에서 데이터 페칭이 지연되면 전체 페이지의 응답 속도가 느려질 수 있다.

SSG의 등장

사전 렌더링의 데이터 페칭 과정에서 백엔드 서버의 상태나 네트워크 장애 등으로 인해 페이지 생성이 지연될 가능성은 언제나 존재한다. 이 문제를 해결하기 위해 Next.js는 오래 걸릴 수 있는 사전 렌더링을 프로젝트 가동 전, 즉 빌드 타임에 미리 수행하도록 설정하는 또 다른 사전 렌더링 방식을 제공한다. 이 방식을 **정적사이트 생성(Static Site Generation, SSG)**이라고 한다.

위 그림처럼 프로젝트의 빌드 타임에 미리 사전 렌더링을 진행한다. 프로젝트가 가동되고 접속 요청이 발생하면 미리 생성해 둔 페이지로 지연 없이 바로 응답한다.

대신 빌드 타임 이후에는 페이지를 다시 생성하지 않는다. 따라서 나중에 페이지의 데이터가 업데이트 되어도 이를 반영하지 않는다. 결국 SSG는 페이지를 빌드 타임에 미리 생성하므로 페이지의 데이터가 다소 정적인 데이터일 때 적합한 방식이다.

SSG의 한계점과 ISR의 등장

SSG 방식의 한계점

SSG 방식은 빌드 타임에 사전 렌더링을 미리 진행해 정적 페이지를 생성하고 서버에 저장한다. 따라서 사용자의 접속 요청일 들어오면 생성한 정적 페이지로 빠르게 응답하는 식으로 동작한다.

SSG를 이용하면 브라우저의 페이지 요청에 빠르게 응답할 수 있어 사용자의 서비스 만족도를 크게 높일 수 있다. 반면에 빌드 타임 이후에는 페이지를 다시 생성하지 않으므로 최신 데이터를 반영하는 데 어려움이 있다.

따라서 데이터가 빈번하게 변하는 페이지라면 SSG를 사용하기 어렵다. 빠른 응답 속도를 포기하는 것이 아쉽지만, 최신 데이터를 반영하는 일이 더 중요하므로 이 상황에서는 대체로 SSR을 사용한다. 그러나 SSR도 완벽한 해결책이라 보기는 어렵다.

SSR은 요청할 때마다 페이지를 새로 생성하므로 서버의 부하가 커지고 데이터의 페칭 속도나 네트워크 상태에 따라 페이지의 응답이 느려질 수 있다. 결국 SSG와 SSR 모두 응답 속도와 최신 데이터 반영 중 하나는 포기해야 하는 상황이다.

ISR의 등장

새로운 사전 렌더링 방식인 **증분 정적 재생성(Incremental Static Regeneration, ISR)**을 활용하면 빠른 응답 속도와 최신 데이터 반영이라는 두 마리 토끼를 모두 잡을 수 있다. ISR)**을 활용하면 **빠른 응답 속도와 최신 데이터 반영**이라는 두 마리 토끼를 모두 잡을 수 있다.

ISR은 SSG로 빌드 타임에 생성한 정적 페이지를 일정 주기마다 다시 생성해 최신 데이터를 반영하는 방식이다. 특정 시간이 지나기 전까지는 SSG처럼 미리 생성한 페이지로 빠르게 응답하고 설정 시간이 지나면 Next.js 서버가 백그라운드에서 해당 페이지를 다시 생성해 최신 데이터를 반영한다.

여기서 주의할점은 설정 시간이 지난 다음에 들어온 첫 번째 요청에서 바로 페이지를 생성해 응답하는 것이 아니라는 점이다. 대신 이미 생성된 페이지로 빠르게 응답함과 동시에 한편에서는 백그라운드에서 최신 데이터를 반영해 다시 페이지를 생성한다. 이렇게 동작하는 까닭은 사용자가 페이지를 아무 때나 요청하더라도 언제든지 정적 페이지로 빠르게 응답하기 위함이다.

결론적으로 특정 페이지의 데이터 변경이 매우 빈번하게, 예컨대 초 단위로 이루어지는 특별한 서비스 상황이 아니라면 ISR을 이용하는 편이 좋다. 빠른 응답 속도와 최신 데이터라는 두 가지 요구를 모두 만족시킬 수 있기 때문이다.

사전 렌더링 방식 최종 정리

사전 렌더링 방식마다 고유한 특징과 장단점이 있어 어떤 방식을 선택하는 것이 옳은지 ‘정답’은 없다. 페이지의 성격, 데이터의 변동성, 성능 요구 사항, 사용자 경험 등을 종합적으로 고려해 상황에 맞는 방식을 선택하는 것이 중요하다.

참고 자료

한 입 크기로 잘라먹는 Next.js 도서