SSR과 CSR

SSR

• 서버에서 렌더링된 HTML파일을 브라우저에 전달하는 방식
• 고전적인 방식, 최근에는 CSR과 SSR을 혼합해서 사용하는 방식도 존재함(Next.js)

SSR의 장점

1. 첫번째 페이지 로딩은 CSR보다 빠르다
2. SEO에 유리함

• SEO란?
  SEO(Search Engine Optimization), 검색엔진 최적화는 검색엔진이 양질의 검색결과를 만들어내기 위해 미리 웹사이트 정보를 수집하고 최적화를 하는 작업을 말함
• SEO는 기본적으로 웹페이지의 첫화면을 기준으로 HTML을 수집한다. 따라서 이미 첫화면 HTML에 내용이 담겨있는 SSR은 SEO에 유리하다.

SSR의 단점

1. 페이지를 전환할 때 마다 깜빡임 발생(blinking issue) -> 사용자 경험에 좋지 않음

• 페이지를 전환할 때 마다 새로운 HTML 파일을 서버로부터 받아와야 하기 때문에 파일이 새롭게 브라우저에 나타나는 과정에서 깜빡임 발생

2. 서버에 과부하가 걸리기 쉽다

• 렌더링 작업을 서버에 맡기기 때문에 그 만큼 서버에 부하를 준다
  -> 사용자가 많은 제품일수록 문제가 될 수 있음

3. 상호작용시 반응이 없을 수 있음 -> 사용자 경험에 좋지 않음

• SSR은 서버에서 렌더링된 결과를 완성 후 브라우저로 보내주기 때문에 결과를 기다리는 동안 동적으로 로딩처리를 할 수 없음

CSR

• 서버에서 HTML은 빈파일, JS파일에는 렌더링에 필요한 모든 정보를 담아 브라우저로 보낸다.
• HTML 빈파일을 먼저 렌더링 한 뒤, JS파일을 실행해 브라우저에서 렌더링을 진행하는 방식

장점

1. 상호작용이 많은 서비스에서는 SSR보다 빠르다

• 상호작용을 할 때 마다 전체 파일을 서버로 부터 받아와야하는 SSR 방식보다, 초기 로딩 때 전체 파일을 받아 브라우저에서 렌더링을 하는 방식이 상호작용이 더 빠르다.

2. 페이지 전환시 깜빡임이 없음 -> 사용자 경험에 좋다.

• 브라우저에서 전체 파일을 렌더링하기 때문에 SSR에서 나타나는 깜빡임이 없음

3. 서버에 부하를 덜어줌

단점

1. 사용자가 웹사이트를 볼 수 있는 시간과(Time to View), 실제로 상호작용 할 수 있는 시간(Time to interact)과의 간격이 존재

• 첫 화면 로딩시 사용자가 웹사이트를 바로 볼 수 있는 있지만 렌더링이 완료되기 전까지는 상호작용이 불가능하며, 로딩을 기다려야 하기 때문에 사용자 경험에 좋지 않다.
• 최근에는 첫 화면은 SSR로 처리하고 상호작용은 CSR로 처리하는 방식이 존재(Next.js)

2. SEO에 비효율적

• SEO는 기본적으로 페이지의 첫 화면을 기준으로 정보를 수집하기 때문에 첫 화면이 빈 HTML 파일인 CSR은 SEO에 문제가 생길 수 있다.
• 최근에는 SEO를 개선해서 CSR 페이지도 정확하게 수집하는 방식도 고안되었지만 기본적으로 비효율적