Server-Side Rendering과 Client-Side Rendering에 대한 개념 이해

 

 

Server-Side Rendering(SSR)이란?

• 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식

• JSP/Servlet 아키텍처에서 이 방법을 사용하였음

 

👍 장점

• 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음

• 검색엔진최적화 SEO(search engine optimization) 적용이 용이

 

👎 단점

• 모든 요청에 관해서 필요한 부분만 수정하는 것이 아니라 완전히 새페이지를 로딩하고 보여줌

• 매 요청하다 전체를 로딩해서 CSR보다 비교적 느림

• 대역폭(bandwidth) 을 많이 사용함📌 대역폭(bandwidth) 이란?
• 어떤 네트워크 유형에서 최대 데이터 전송 비율(시간당 전송량)을 말하며, 보통 초당 비트수(bps)로 이야기함
• 많이 사용되는 대역폭의 뜻은 네트워크를 통해 전송되는 데이터의 양

• 사용자 경험 좋지 않음

 

 

Client-Side Rendering(CSR)이란?

• 서버가 json파일만 보내주고 html을 그리는 것은 클라이언트 측에서 js가 수행하는 방식

• 서버에서 빈 html 문서를 받고 js를 다운로드 받고 js를 작동해서 api로부터 데이터를 가져오고(fetch) 콘텐츠를 보는 방식

• 점점 더 복잡해지는 웹페이지를 구현하기 위해 전통적인 방식인 SSR보다는 CSR로 웹을 구현하는 경우가 많아짐

 

👍 장점

• CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어들여 SSR보다 조금 더 빠른 렌더링이 가능함

• page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하기 때문에 모바일 네트워크에서도 빠른 속도로 렌더링 가능

• lazy loading 지원📌 lazy loading 이란?
• 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술
•  

 

👎 단점

• Googlebot과 Search console에 검색 노출이 되지 않음 → 브라우저가 없으므로 html만 가져와서 검색에는 노출되지 않음
• 페이지를 읽고 javascript를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기 구동 속도가 느림

 

Uploaded by Notion2Tistory v1.1.0