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

클라이언트 사이드 렌더링

서버에서 전체 페이지를 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. HTML이 텅텅 비어있기 때문에 처음에 접속하면 빈 화면만 보이고 링크된 자바스크립트를 다운로드 받게 된다. 여기에는 어플리케이션에 필요한 로직, 구동하기 위한 프레임워크, 라이브러리의 소스코드들도 모두 포함되어 있다. 그렇기 때문에 처음 다운로드 받을 때 꽤나 시간이 소요될 수 있다.

장점

• interaction이 빠르다
• Single Page Application이기 때문에 깜빡임이 없다

단점

• 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다
• 검색엔진은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML을 분석해서 웹 사이트를 빠르게 검색할 수 있도록 도와준다. 그러나 CSR에서는 HTML 바디가 비어있기 때문에 SEO(search engine optimization)가 잘 작동하지 않는다.

서버 사이드 렌더링

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

장점

• 빠른 페이지 로딩
• 좋은 SEO 성능

단점

• 페이지 이동시 깜빡임 존재
• 서버에서 처리하는 작업이 늘어나므로 서버 과부화 가능성 존재
• 보여지는데 걸리는 시간인(TTV)와 Interaction이 가능한 시간인(TTI) 사이에 공백 시간이 존재한다.