웹 애플리케이션의 렌더링 방식

 

[ 클라이언트 사이드 렌더링 (Client-Side Rendering) ] _ CSR

렌더링 위치

 CSR에서는 웹 애플리케이션의 초기 HTML은 비어 있거나 미리 정의된 고정 템플릿을 포함하고 있다.

이후 브라우저에서 JavaScript가 로드되고 실행되면, JavaScript가 동적으로 화면을 생성하고 업데이트.
 

서버 역할

 서버는 주로 데이터 API를 제공하며, 클라이언트는 이 API를 사용하여 데이터를 가져와 화면을 렌더링.


장점

사용자 경험과 상호작용을 풍부하게 제공, 

초기 로딩 후에는 애플리케이션을 캐싱하고 재사용할 수 있어 빠른 전환 및 상호작용 가능.

 
단점

검색 엔진 최적화(SEO)가 어렵고, 초기 로딩 성능이 SSR에 비해 떨어진다.

초기 HTML이 비어 있거나 제한적일 수 있어 소셜 미리보기 및 공유 링크에서 문제가 발생할 수 있다.

 

---

 

[ 서버 사이드 렌더링(Server-Side Rendering) ] _ SSR

 
렌더링 위치

 SSR에서는 서버에서 초기 HTML을 생성하고 렌더링한 후, 이를 클라이언트에게 전달한다.

클라이언트에서는 이 초기 HTML을 받아서 렌더링하고, 그 후에 JavaScript를 로드하고 초기화.

서버 역할

 서버는 초기 HTML을 생성하는 역할을 담당하며, 이 과정에서 데이터를 가져와 초기 렌더링을 수행.

장점

 SEO를 개선할 수 있고, 검색 엔진은 초기 HTML을 쉽게 색인화할 수 있다.

초기 로딩 성능이 CSR에 비해 우수하며, 소셜 미리보기 및 공유 링크에서 초기 HTML을 사용할 수 있다.


단점

 복잡한 상호작용 및 렌더링이 필요한 페이지에서는 추가적인 서버 리소스가 필요할 수 있다.

초기 렌더링 시간이 길어질 수 있으며, 사용자 경험과 성능이 서버 부하에 영향을 받을 수 있다.