MPA부터 SSR까지 정리

1. 전통적인 프론트엔드 배포 방식: MPA

MPA(Multi Page Application)는 전통적인 서버 사이드 렌더링 방식이다.

• 각 URL마다 별도의 HTML 파일이 존재(예를 들어, /about은 about.html이고, /profile은 profile.html이다)
• 페이지 이동 시 및 렌더링 시 깜빡거림 현상이 발생
• 컨텐츠 양에 따라 페이지별 렌더링 편차가 심해져 UX가 저하

이러한 문제 때문에 SPA 방식이 등장하게 되었다.

2. 획기적인 방법: SPA

SPA(Single Page Application)는 브라우저에서 동작하는 JavaScript를 이용해 동적으로 페이지와 컴포넌트를 렌더링한다.

• 최초 서버로부터는 텅 빈 div#root만 다운로드
• JavaScript 번들을 통해 UI가 완성
• 새로고침이나 깜빡거림 없이 웹서비스를 이용할 수 있어 사용자 경험이 크게 향상
• 그러나 초기 로딩 속도가 늦음(텅 빈 페이지가 JavaScript가 평가되고 실행될 때까지 노출된다)
• 이를 보완하기 위해 코드 스플리팅(Lazy Loading) 기법이 제시되었으나 완벽한 해결책은 아님!

3. 주요 렌더링 기법

Next.js에서 사용되는 네 가지 주요 렌더링 기법은 다음과 같다.

3.1 CSR (Client Side Rendering)

CSR은 브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링하는 방식이다.

• 특징
  • 순수 React를 사용할 때 기본적으로 적용된다.
  • 렌더링의 주체는 클라이언트이다.
• 장점
  • 최초 한 번 로딩 이후 사용자와의 상호작용이 빠르고 부드럽다.
  • 서버에 추가적인 요청을 보내지 않으므로 서버 부하가 적다.
• 단점
  • 첫 페이지 로딩 시간(TTV)이 길어질 수 있다.
  • JavaScript가 로드되고 실행되기 전까지 페이지가 비어 있어 SEO에 불리하다.

3.2 SSG (Static Site Generation)

SSG는 서버에서 페이지를 미리 렌더링하여 정적 HTML 파일을 생성하는 방식이다.

• 특징
  • 최초 빌드 시에 한 번 정적 페이지가 생성된다.
  • 사전에 미리 생성된 페이지를 클라이언트에 바로 제공한다.
• 장점
  • 첫 페이지 로딩 시간이 매우 짧아 사용자에게 빠른 TTV를 제공한다.
  • SEO에 유리하며, CDN 캐싱이 가능하다.
• 단점
  • 정적인 데이터에만 사용할 수 있다.
  • 사용자와의 상호작용이 서버 통신에 의존하여 상대적으로 느릴 수 있다.
  • 데이터에 의존하는 동적 페이지에는 부적합하다.

3.3 ISR (Incremental Static Regeneration)

ISR은 SSG와 유사하게 정적 페이지를 제공하면서, 설정한 주기마다 페이지를 재생성하는 방식이다.

• 특징
  • 정적 페이지를 우선 제공하고, 일정 주기마다 서버에서 페이지를 재생성한다.
  • 예를 들어, 재생성 주기가 10분이면 10분마다 최신 데이터를 반영한다.
• 장점
  • 정적 페이지의 빠른 로딩과 함께 최신 콘텐츠 반영이 가능하다.
  • CDN 캐싱이 가능하다.
• 단점
  • 동적 콘텐츠를 실시간으로 다루기에는 한계가 있다.
  • 데이터에 의존하는 동적 페이지에는 적합하지 않다.

3.4 SSR (Server Side Rendering)

SSR은 클라이언트의 요청 시 서버에서 실시간으로 페이지를 렌더링하여 HTML을 제공하는 방식이다.

• 특징
  • 클라이언트의 요청에 따라 서버가 HTML 파일을 생성하여 제공한다.
  • 데이터베이스나 외부 API를 호출하여 최신 데이터를 반영한다.
• 장점
  • 빠른 TTV와 높은 보안성을 제공한다.
  • SEO 최적화에 유리하며, 실시간 데이터를 사용할 수 있다.
  • 데이터에 의존한 동적 페이지 구성이 가능하다.
• 단점
  • 페이지 콘텐츠가 변경될 때마다 전체 사이트를 재빌드해야 하므로 서버 과부하가 발생할 수 있다.
  • 요청할 때마다 페이지를 생성해야 하므로 부하가 증가한다.

4. 종합 비교

네 가지 렌더링 방식은 각각의 장단점이 있다.

• CSR은 클라이언트에서 동적으로 렌더링하여 상호작용이 빠르지만, 초기 로딩이 느리고 SEO에 불리하다.
• SSG는 미리 생성된 정적 페이지를 제공하여 빠른 로딩과 SEO 최적화를 이루지만, 정적인 데이터에만 적합하다.
• ISR은 SSG의 장점과 함께 일정 주기마다 최신 데이터를 반영할 수 있으나, 완전한 실시간 업데이트에는 한계가 있다.
• SSR은 요청 시 서버에서 실시간으로 페이지를 렌더링하여 최신 데이터를 반영하므로 동적 페이지에 적합하지만, 서버 부하가 클 수 있다.