서버 사이드 렌더링(SSR) , 클라이언트 사이드 렌더링(CSR)

🔥 서버 사이드 렌더링이란? (SRS: Server Side Rendering)

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 

SSR은 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 클라이언트는 잘 만들어진 HTML 문서를 사용자에게 바로 보여주게 된다.

 

장점

• 페이지 로딩 속도가 빨라진다
• 모든 콘텐츠가 HTML 에 표기되기 때문에 효율적인 검색엔진최적화(SEO) 가 가능하다.

단점

• Blinking Issue : 새로고침을 하게 되면 전체 페이지를 다시 서버에서 받아와야 하기에 화면이 없어졌다가 나타난다.
• 서버 과부하 : 사용자가 많은 제품일 수록 서버에 데이터를 요청하는 횟수가 많아지기 때문

 

🔥 클라이언트 사이드 렌더링이란? (CRS: Client Side Rendering)

CSR은 SPA 트렌드와 CPU 성능 상승 + JS 표준화(리액트, 뷰, 앵귤러 등의 프레임워크 발전)와 함께 본격적으로 시작되었다. CSR은 쉽게 말해서 클라이언트에서 모두 처리하는 것인데, 서버에서 전체 페이지를 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. 서버 사이드 렌더링과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것이다.

*SPA (Single Page Application) : 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션

body 안에는 id="root"만 달랑 하나 들어있고, 어플리케이션에 필요한 자바스크립트의 링크만 들어가있다.

HTML이 텅텅 비어있기 때문에 처음 접속하게 되면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운로드 받게 된다.여기에는 어플리케이션에 필요한 로직, 구동하기 위한 프레임워크, 라이브러리의 소스코드들도 모두 포함되어 있다.

단점

• 서버 첫 요청 시 전체 페이지에 대한 모든 파일을 받기 때문에, 사용자가 첫 화면에 들어와서 보여지는 데 시간이 오래걸린다.
• 검색엔진최적화(SEO) 에 대한 추가 보완 작업이 필요하다.

장점

• 새로고침이 없으므로 빠른 인터렉션 구현
• 서버 트래픽 감소

 

서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점

어디서 화면에 보일 페이지의 내용을 그리느냐의 차이입니다. 클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리고 서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져줍니다. 아래와 같이 말이죠.

 

 

참고
startupcode
@ctdlog
joshua1988