[CS] SPA 렌더링 전략과 렌더 과정(CSR, SSR, SSG)

1. SPA(Single Page Aplication)

SPA는 하나의 HTML 페이지로 구성되는데 서버로부터 완전한 새로운 페이지를 불러오지 않고

JavaScript를 사용해서 필요한 부분만 동적으로 업데이트하여 페이지의 일부분만 다시 그릴 수 있다. 이를 통해 빠른 응답속도와 화면 깜빡임이 없이 사용자 경험을 향상시킨다.

SPA에서 웹 애플리케이션에 콘텐츠를 화면에 그리거나 접근 하는 방식으로는 CSR, SSR, SSG가 있다.

 

2. CSR(Client-Side Rendering)

CSR은 가장 일반적인 렌더링 전략으로 React, Angular, Vue.js 와 같은 프레임워크에 사용되며 말 그대로 클라이언트(브라우저)에서 랜더링이 이루어지며 초기 요청 시 서버는 빈 HTML 문서를 제공한다. 이후 클라이언트는 데이터를 비동기적으로 가져오거나 API 호출을 통해 데이터를 가져온 후 자바스크립트가 DOM을 사용해서 페이지의 요소를 동적으로 생성하고 업데이트 하며 브라우저는 업데이트 된 내용을 화면에 렌더링한다.

 

CSR은 동적인 UI 업데이트와 빠른 상호작용이 가능하다는 장점이 있지만 클라이언트 측에서 데이터 요청 및 처리를 하기 때문에 초기 로딩시간이 길고, 자바스크립트로 로드하기 때문에 콘텐츠를 렌더링 하기 전까지 HTML이 비어있어 검색 엔진 최적화(SEO)에 제약이 있을 수 있다.

 

3. SSR(Server-Side Rendering)

SSR은 서버측에서 렌더링 하는 방식으로 Next.js, Nuxt.js 같은 프레임워크와 함께 사용된다.

클라이언트가 초기 요청을 보내면 서버에서 페이지를 완전히 렌더링한 후 클라이언트에 전달한다. 서버에 데이터를 가져와 렌더링하기 때문에 별도의 자바스크립트를 실행하지 않아도 되고 클라이언트는 완전히 렌더링 된 페이지를 받아볼 수 있다.

 

초기 로딩 속도가 빠르고 서버에서 렌더링 되기때문에 사용자가 빠르게 페이지의 콘텐츠를 볼 수 있지만, 서버측에서 매번 요청할 때마다 페이지를 다시 생성해야하므로 서버 부하가 증가할 수 있다. 또한 SSR은 전체 페이지를 렌더링 해야하기 때문에 페이지 이동 시엔 CSR 보다 느릴 수 있다.

 

4. SSG(Static Site Generation)

SSG는 정적 사이트 생성 방식으로 모든 페이지를 미리 사전에 완전히 렌더링 해서 HTML 파일을 생성한다. 이후 서버에서는 단순히 해당 HTML 파일을 클라이언트에게 전달한다.

 

SSG는 동적인 기능이 필요하지 않는 웹페이지에 적합하며 클라이언트 측에서 렌더링이 필요하지 않기 때문에 빠른 로딩 속도와 좋은 성능을 제공한다. 그러나 실시간 데이터를 처리하는 데는 제한이 있고, 콘텐츠가 변경되면 다시 빌드해야하기 때문에 콘텐츠 업데이트에는 추가적인 작업이 필요하다.

 

5. 어떤 걸 사용해야 할까?

대규모 애플리케이션, 복잡한 상호작용(실시간 채팅, 대시 보드 등), 사용자 경험 개선 -> CSR

검색 엔진 최적화 (SEO), 빠른 초기 로딩 속도, 일부 동적 기능 유지 -> SSR 

콘텐츠 업데이트가 적음(블로그, 포트폴리오, 회사 소개 등), 초기 로딩 속도, 서버 부하 감소 -> SSG

 

* 단순 CSR만 사용하는 회사는 거의 없기때문에 CSR + SSR에 대한 이해가 필요하다.