CSR vs SSR

서버사이드렌더링, 클라이언트사이드 렌더링을 알기 전에, 렌더링이란 무엇일까?

렌더링: 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시하는 것

CSR 이란?

• 클라이언트 측에서 렌더링하는 방식이다(모든 것을 다해먹는다)
• 클라이언트 사이드의 전반적인 흐름을 적어보면,

1. 서버에서 HTML파일을 클라이언트에 보내주면 HTML은 빈 화면일 것이다
2. 하지만 링크된 어플리케이션 자바스크립트를 서버로 부터 다운로드 받는다
3. 해당 어플리케이션 자바스크립트 파일에는 모든 소스코드가 포함되어있다
4. 추가로 필요한 데이터가 있다면, 서버에 요청해서 데이터를 받아온 후 동적 HTML을 만들어 유저에게 최종적인 어플리케이션을 보여준다

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

첫 요청할때 한페이지 만 불러오게 된다.
React 를 보면 index.js 만 불러오게 되고,

그후, 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에
서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다.

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

1. 유저가 첫 화면을 보기까지 오래걸릴 수 있다
2. Low SEO --> 아래에서 설명하겠다!!

SSR 이란?

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

• 서버사이드 렌더링의 전반적인 흐름을 적어보면,

1. 유저가 웹사이트에 접속한다
2. 서버에서 필요한 데이터를 모두 가져와서 HTML파일을 만들게 된다
3. HTML파일과 동적으로 제어할 수 있는 소스코드를 함께 클라이언트에 보내준다
4. 클라언트 측에서는 잘 만들어진 문서를 받아와서 유저에게 보여준다

SSR(서버사이드 렌더링) 의 장점

1. 페이지로딩이 빠르다는 장점이 있다.
2. 모든 컨텐츠가 html에 담겨있기 때문에, 더 좋은 SEO를 할 수 있다.

SEO(Search Engine Optimization): 구글, 네이버와 같은 검색 엔진들은 서버에 등록된 웹사이트를 하나하나씩 돌아다니면서 웹사이트의 html문서를 분석해서 유저들이 검색을 원활히 할 수 있게 도와준다.

SSR(서버사이드 렌더링) 의 약점

1. 깜박임 이슈가 존재, 사용자가 클릭을 하게되면 전체적인 웹사이트를 다시 받아오는 것과 동일하기 때문에, 썩 좋지 않은 UX(User Experience)를 제공할 수 있다.
2. 서버에 과부하가 걸리기 쉽다. 특히 사용자가 많은 서비스일때, 많은 사용자들이 클릭을 할때마다 서버에서 필요한 데이터를 가져와서 html을 만들어야 하기 때문이다.
3. 사용자가 웹사이트를 빠르게 확인할 수 있지만 동적(dynamically)으로 데이터를 처리하는 자바스크립트를 받지 못해서 여기저기 클릭을 했는데, 반응이 없을 수 있다.