Rendering Strategies

November 19, 2024

요즘들어 SSR에 관한 이야기가 많이 노출되고 있고 실제 서비스에서 SEO의 중요성으로 인해서 SSR을 도입하는 회사들이 많아지고 있습니다.

이에 따라 렌더링 전략을 정리해보고 각자 어느 상황에 적절하게 쓰일 수 있는지 파악해 봅시다.

SSR

SSR(Server Side Rendering)은 사실 가장 고전적인 렌더링 방식입니다. 전혀 새로울게 없는 렌더링 방식입니다.

React의 대중화로 CSR이 널리 사용되어서 SSR이 새로운 기술로 보일수 있지만 SSR은 사실 고전적인 방식입니다.

서버를 개발 할때에 특정 API에서 html을 반환함으로서 사용자가 페이지를 요청 할때마다 동적으로 렌더링해서 클라이언트에게 전달했습니다.

예전 방식은 Srping Boot와 같은 프레임워크에서 html을 반환하고 특별한 템플릿 언어를 이용해 html에 데이터를 바인딩하여 표출하는 방식이였습니다.

현대에 들어서는 Next.js와 같은 프레임워크들이 등장함으로서 서버 프레임워크와 분리되어 프론트엔드에 특화된 SSR을 수행 할 수 있도록 최적화 되었습니다.

Next.js와 같은 프레임워크를 사용하여 SSR을 수행할때 가장 큰 장점은 서버에서 수행할 부분과 클라이언트에서 수행 할 부분을 나누어서 렌더링 할 수 있다는 점입니다.

기존 방식은 서버에서 모두 한번에 렌더링되어서 서버가 렌더링하는 동작 자체가 부담이 될 수 있었는데 이를 클라이언트와 적절히 렌더링을 나눔으로서 최적화 할 수 있습니다.

그렇기 때문에 SSR로 개발 할 때에는 모두 서버에서 렌더링 하는것도, 모두 클라이언트에서 렌더링하는 것도 맞지 않습니다. 적절히 역활에 따라 서버 또는 클라이언트에서 나누어서 렌더링 될 수 있도록 해야합니다.

CSR

현대 프론트엔드를 발전 시킨 방식입니다. 기존에는 모두 SSR을 이용해서 화면을 개발하였는데, CSR이 등장함으로서 클라이언트에서 화면을 렌더링 할 수 있다는 방향으로 인식을 바꾸어 놓았습니다.

그것의 일등공식은 당연히 React 였고 비슷한 계열의 프레임워크로는 Angular.js 등이 있습니다.

SSG

SSR은 서버에서 사용자의 요청 때마다 매번 새롭게 렌더링을 하여 클라이언트에게 반환합니다. 이는 정적인 컨텐츠에게는 오히려 불필요한 작업일 수 있습니다.

왜냐하면 컨텐츠가 매번 동일한데 사용자의 요청 때마다 동일한 컨텐츠를 서버에서 만들것이기 때문입니다.

이러한 문제를 효율적으로 처리하기 위해서 빌드타임에 아예 렌더링 결과물을 만들어내서 사용자의 요청 때에는 해당 빌드타임에 만들어 낸 결과물을 그대로 반환하여 서버에서 렌더링하는 리소스를 줄일 수 있습니다.

요즘은 Next.js에서는 컴포넌트를 분석해서 SSG 할 수 있는 컴포넌트는 빌드해서 렌더링 결과물을 가지고 있고, SSG를 수행하지 못하는 컴포넌트에 대해서는 SSR로 동작하도록 합니다.

ISR

SSR과 SSG는 각각 장점이 있는데 SSG는 빌드타임에 빠르게 컨텐츠를 만들어둠으로서 클라이언트가 빠른 로딩이 가능합니다. 그렇기 때문에 SSR과 상대적으로 렌더링 서버의 부하도 줄어듭니다. 그리고 SSR은 요청마다 동적으로 렌더링하므로 최신 데이터를 반영할 수 있습니다.

그런데 만약 정적인 컨테츠가 조금씩 시간에 따라 변하는 화면이라면 어떨까요? 이런 경우 매번 동적으로 렌더링하는 것은 불필요하나 때때로 최신의 데이터를 반영해야합니다.

이러한 요구사항을 수행하기 위해서 SSG로 렌더링을 하고 일정 간격에 따라 렌더링 서버에서 백그라운드 작업으로 정적인 컨텐츠를 최신 데이터를 반영하여 업데이트 합니다.

이렇게 동작하므로써 SSG의 장점을 가져가면서 최신 데이터를 반영 할 수 있게 됩니다. ISR은 Next.js에서 처음 도입된 개념으로서 점차 많은 프레임워크에서 지원하고 있습니다.

방식에 따른 프레임워크 선택

이러한 렌더링 방식들이 있을 때, 각각 어떤 프레임워크가 좋은 선택일까 생각해보면, 사실 지금까지는 이 렌더링 방식을 모두 지원하는 Next.js가 좋은 선택이 될 수 있습니다.

그러나 모두 지원한다고 해서 최선의 선택은 아니면 만약 특정한 방식으로만 렌더링해야 한다면 각 방식에 최적화된 프레임워크를 사용하는것도 좋을 것입니다.