Interview 1장 - SSR과 CSR

CS

SSR

• Server Side Rendering의 약자이다.
• 클라이언트측에서 서버의 HTML로 렌더링하는 방식이다.

SSR 방식

1. 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한다.
2. 컴파일된 HTML을 클라이언트의 브라우저로 전송한다.(response)
3. 브라우저는 HTML파일을 다운로드하고 사용자가 사이트를 볼 수 있게 한다.
4. 그 다음 자바스크립트를 다운로드한다.
5. 사용자가 페이지를 이동할 경우, 페이지에 맞는 HTML과 자바스크립트를 요청,전송하는 방식으로 반복된다.

SSR의 장점

1. 초기 페이지 로딩 시간이 빠르다.
   1. 렌더링이 준비된 HTML파일을 브라우저에서 로딩하기 떄문에 CSR과 비교하여 더욱 빠르다.
2. SEO 검색엔진에 친화적이다.
   1. 검색엔진은 HTML의 정보를 읽어 결과를 도출하기 떄문에, HTML자체에 정보를 담고 있는 SSR 방식이 친화적이다.
   2. CSR이 빈 HTML파일을 보내고, 필요할 때마다 자바스크립트를 보내 페이지를 로딩하는 방식과의 차이점
3. 클라이언트의 하드웨어 및 소프트웨어 성능에 영향을 덜 받는다.
   1. 일반적으로 서버가 더 높은 성능과 네트워킹 속도를 가지고 있는데, 클라이언트에서는 서버에서 완성된 페이지만 렌더링해주면 되기 때문에 클라이언트 측의 부담이 덜하다.

SSR의 단점

1. 페이지를 이동할 때마다 서버에서 페이지를 생성하는 시간이 필요하기 떄문에 TTFB(Time To Frist Byte)가 느리다.
2. 페이지에 로딩해야 할 정보가 많다면 로딩에 필요한 데이터가 많이 필요하기 떄문에 사용자의 경험을 해칠 수 있다.
3. 서버가 HTML 파일과 안에 내용을 생성해야하기 떄문에 서버 호싕이 필요하다.
4. CSR에 비해 더 많은 개발 노력이 필요하며, 프레임워크 사용 시 추가적인 비용이 발생한다.

CSR

• 클라이언트측에서 웹 페이지를 렌더링하는 방식이다.
• 모든 로직과 데이터 등을 가져와 클라이언트측에서 처리된다.
• CSR은 필요한 자바스크립트만을 사용하기 때문에 적극적으로 코드를 분할하여, 필요한 곳에 필요한 것만 제공할 수 있어야 한다.

CSR 방식

1. 사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML파일을 다운로드(response)한다.
   1. 이 HTML 파일은 script,meta,link 등의 태그를 포함하며, HTML은 빈 파일이라고 보면 된다.
2. 브라우저는 HTML에 있는 자바스크립트 파일을 다운로드하여 AJAX를 통해 API요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링한다.
3. 사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링한다.

CSR 장점

1. CSR을 위해 모든 지원 스크립트가 사전에 로드되어있기 때문에 로드 시간이 단축된다.
2. 별도의 API를 호출할 필요가 없는 페이지거나, 이미 스크립트가 로딩된 경우 인터넷 없이도 웹 애플리케이션을 실행할 수 있다.
3. CSR은 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다.

CSR 단점

1. 초기 페이지 로드 시간이 SSR에 비해 느리다.
   1. 브라우저에서 사용 가능한 컨텐츠로 HTML을 컴파일해야하고 HTML,CSS 등 모든 필수 스크립트를 브라우저에서 로드하여야 하기 시간이 오래 걸린다.
2. SEO에 친화적이지 않다.
   1. CSR방식은 빈 HTML을 갖고 있기 때문에 검색 엔진이 필요한 정보를 읽어낼 수 없다.
   2. 최근에는 많이 개선되었지만, 아직 많은 검색 엔진이 이를 지원하지 않는다.
3. 한 페이지에서 다른 페이지로 이동할 경우, 이를 인지시켜주기 위해 각 페이지에 대한 메타 데이터를 설정해야하고 클라이언트에서 렌더링시키기 위해 추가적인 노력이 필요하다.
4. 브라우저가 페이지를 표시하기 전에 HTML과 자바스크립트 파일을 다운로드하는 동안 사용자는 빈 페이지를 보고 있어야 하기 때문에 사용자 경험(UX)가 좋지 않다.
5. 클라이언트의 하드웨어 및 소프트웨어 성능 의존이 높기 때문에 최적의 시간에 페이지를 렌더링하지 못하는 경우가 발생한다.
   1. 이러한 이탈이 높을수록 검색엔진 순위도 낮아진다.