SSR 과 CSR 비교!

서버 사이드 렌더링과 클라이언트 사이드 렌더링.. 무슨 차이일까

 

일단 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)은 웹에서 페이지의 내용을 사용자에게 보여주는 두가지 방식이다.

 

클라이언트 사이드 렌더링(CSR)

CSR은 렌더링 프로세스가 사용자의 웹 브라우저의 클라이언트 측에서 일어난다.

 

서버는 JavaScript 파일과 함께 최소한의 HTML 문서를 클라이언트에 보낸다.  JavaScript 코드는 API에서 데이터를 가져오고 DOM을 조작하여 사용자 인터페이스를 업데이트한다.

🐇CSR의 장점:

• 빠른 상호 작용: CSR을 사용하면 클라이언트가 서버에 추가 요청을 하지 않고도 UI를 업데이트할 수 있다. 원활하고 빠른 사용자 경험을 제공한다.
• 성능 향상: 첫 페이지를 로딩한 후에는 렌더링이 필요한 부분만 불러오기때문에 빠르다. 필요한 구성 요소나 데이터만 가져오기 때문에 서버 부하가 줄어들고 전반적인 성능이 향상된다.

 

서버 사이드 렌더링(SSR)

 

SSR은 서버가  완전히 렌더링된 HTML 페이지를 생성하여 클라이언트로 전송한다. 서버에서 렌더링을 모두 처리하여 클라이언트에 바로 표시할 수 있는 완전한 페이지를 보낸다.

🐿️SSR의 장점:

• SEO 개선: 검색 엔진 크롤러가 완전히 렌더링된 HTML 페이지를 쉽게 파싱할 수 있으므로 SSR이 유리하다. 
• 초기 로드 성능: SSR은 서버가 완전히 렌더링된 페이지를 전송하기 때문에 CSR에 비해 첫 페이지 로딩이 빠르다. 

그래서 뭐 쓰면 됨?

상황에 맞게 쓰자

 

이럴 땐 CSR쓰자

• 첫 로딩 이후 상호작용이나 응답속도가 빨라야 할 때 
• 네트워크 빠를 때
• SEO 필요없음
• 보여줘야하는 데이터가 많거나 상호작용이 많을 때

 

이럴 땐 SSR쓰자

• 첫 로딩이 빨라야 할 때
• 네트워크 느릴 때
• SEO가 중요함
• 상호작용이 별로 없을 때