SSR(Server-side Rendering)과 CSR(Client-side Rendering)

1. SSR(Server-side Rendering)

SSR 설명

서버사이드렌더링.

서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말한다. 서버로부터 미리 생성된 페이지를 렌더링하기 때문에 첫 화면 로딩 속도가 빠르다.

 

👍 SEO 최적화: 미리 생성된 페이지가 노출되기 쉽다.

👍 초기 로딩속도: 빠르다.

👍 실시간 데이터 최신화 가능

👎 서버 부하: 서버 자원 소모 심하다.

👎 느린 네트워크 연결: 서버에서 생성해서 가져오기 때문에 네트워크가 느릴 경우 초기 로딩이 느려질 수 있다.

 

예시: 뉴스 사이트, 블로그, 전자 상거래 플랫

 

2. CSR (Client-side Rendering)

CSR 설명

클라이언트사이드렌더링.

 

클라이언트 측에서 페이지 렌더링을 수행하는 방식이다. 서버는 빈 HTML 파일을 제공하고, 데이터와 페이지를 렌더링하는 것은 클라이언트가 동적으로 생성.

👍상호 작용성: 클라이언트에서 페이지를 렌더링하므로 상호 작용이 빠르게 이루어진다.

👍서버 부하 감소: 서버 자원을 덜 소모.

👎 SEO 어려움: 검색엔진은 크롤러로 사이트들을 읽는데, 초기 HTML에 컨텐츠가 없기에 Search Engine Optimization이 어렵다. 

 

예시: SPA, SNS, 대시보드, 라이브 스트리밍 서비스