SSR(Server Side Rendering) 그리고 CSR(Client Side Rendering)

과거에 웹 애플리케이션에 관해서 간단하게 공부를 진행한 적이 있다. 간단하게 복습하고 넘어가자 .

• 과거 정리 내용 : https://jipang9-greedy-pot.tistory.com/111

정적 리소스의 처리를 웹 서버에게, 애플리케이션 로직처럼 동적 처리는 was에, 이렇게 구성하면 효율적으로 리소스 관리를 할 수 있다. 

 

서블릿의 흐름 ( Servlet )

1) 사용자가 url에 요청  2) was 서버에서 요청 메세지를 기반으로 객체 생성 하고, 그 객체를 서블릿 컨테이너에 전달 (이 때 싱글톤 패턴 이용 - 하나의 객채만으로 생성-공유 ) 3) 그에 맞는 정보를 전달

was의 가장 큰 특징 : 동시 요청을 위한 멀티 쓰레드 처리 지원

멀티쓰레드 ? : 스레드는 애플리케이션 코드를 순차적으로 실행하는데 하나의 코드 라인만 수행, 만약에 동시 처리가 필요하면 쓰레드를 추가로 생성

---

본론

이번 기술관련은 프론트쪽의 기술 면접 질문이다. 

대충 웹 관련 공부를 해본 사람이 있으면 분명히 내용을 한번쯤은 봤을 것이라 생각합니다. 

CSR와 SSR은 페이지 렌더링 방식이다. 

( 페이지 렌더링 : 웹 사이트 코드를 대화형 페이지로 바꾸는 절차 ( 요청받은 내용을 페이지에 보여주는 것 ) )

 

1. Client Side Rendering ( CSR )

말 그대로 클라이언트 쪽에서 렌더링을 진행하는 방식인데, 모든 로직과 데이터 받기, 템플릿, 라우팅 등이 서버가 아닌 클라이언트에서 처리됩니다. 대표적으로 리엑트, 뷰, 앵글러 등이 있습니다. 

 

CSR 의 동작 방식  출처 : https://developers.google.com

CSR의 동작 방식은 다음과 같습니다.

1. 사용자가 웹 페이지를 방문하면, script, meta, link 등의 태그가 포함된 최소한의 HTML 파일을 다운로드 합니다.
2. 그래서 이 HTML속에 있는 자바스크립트 번들을 다운로드해서 Ajax 통신을 이용해 요청한 api를 수행하고, 동적 컨텐츠를 가지고 오며 이를 파싱해 컨텐츠를 렌더링 합니다. 
3. 사용자가 다른 페이지를 요구하면 서버에 HTML을 요청하지 않고, 이미 받은 자바스크립트를 이용해 렌더링합니다. 

CSR의 장점과 단점은 다음과 같습니다

• 장점
  • 우선 CSR을 위해 이미 자바 스크립가 로딩되어 있어서 후속 페이지의 로드 시간이 빠릅니다.
  • 클라이언트 측에서 페이지를 구성하기에 서버에 부하가 적습니다.  ( 또한 변경된 내용만 요청함 )
  • 또한 원하는 자원 및 기능에 대해서만 서버에 요청하기에 SSR에 비해 부하가 적습니다.
• 단점
  • 페이지를 읽고 자바 스크립트를 읽은 후 페이지를 다 완성한 후 사용자가 요청한 콘텐츠를 확인할 수 있어서 초기 페이지 구동 시간이 느립니다.  (초기 로드 페이지는 SSR에 비해 느림 )
  • 사용자와 상호 작용 후 페이지를 로드해서 SEO에 불리합니다 ( 웹 크롤러가 페이지를 색인화 하려고 하면 빈 페이지 처럼 보임)
  • 애플리케이션이 커지면 이에 맞춰 자바스크립트의 양도 커져서 다운로드 속도가 느려질 수 있다. 
  • 오히려 사용자 경험 (UX)에 좋지 않을 수 있습니다 -> 브라우저가 페이지를 표시하기 전 HTML과 JS를 받아오는 시간엔 사용자는 빈 페이지를 보게되니까
  • 클라이언트에 전적으로 의존해서 사용자의 하드웨어나 소프트웨어의 성능에 따라 속도 차이가 존재합니다. 

 

---

2. Server Side Rendering ( SSR )

 

이미 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식입니다. 

SSR 의 동작 방식  출처 : https://developers.google.com

 

SSR의 동작 방식은 다음과 같습니다.

1. 클라이언트는 초기 화면을 로드하기위해 서버에 요청을 보냅니다.
2. 서버는 화면에 필요한 모든 데이터와 내용을 모두 얻어서 적용을 마친 HTML과 JS 코드를 브라우저의 응답에 보냅니다.
3. 브라우저에서는 응답을 띄우고, 스크립트 코드를 다운로드 한 후 HTML에 실행시킵니다.
4. 새로운 요청이 발생하면 페이지 전체를 다시 로딩하는데 이 때 많은 리소스가 낭비됩니다. 

 

SSR의 장점과 단점은 다음과 같습니다.

• 장점
  • 화면을 구성하는 각각의 페이지가 있기에 SEO ( 검색 엔진 최적화 ) 에 유리합니다. 이미 다 만들어진 페이지를 검색엔진 크롤러가 요청에 대한 응답으로 받기 때문입니다.
  • 페이지 단위로 새로 로딩하기에 초기 로딩이 빠릅니다. 그래서 사용자가 기다리는 시간이 적습니다. 
  • 클라이언트의 하드웨어 및 SW 성능에 영햘을 덜 받는데, 작업의 전반적인 내용이 서버에서 이루어지기에, 클라이언트의 부담이 CSR에 덜합니다.
• 단점
  • 일단 새로운 요청 시 페이지를 다시 렌더링 하기에 불필요한 리소스 낭비가 심하다. CSR 같은 경우에는 필요한 자원만 불러오지만 SSR은 그렇지 못하다는 점
  • CSR에 비해 느리다 ( 전체를 로딩하니까 ), 그래서 혹시나 렌더링 과정이나 불러올 때, 오류가 발생할 가능성이 높고 이로인해 동작이 안될 수 있다. 
  • 페이지 로딩이 느릴 수 있어서, 이로 인해 사용자의 경험을 방해할 수 있다 
  • CSR 대비 추가적인 개발 노력이 필요하며, 추가 러닝 커브가 발생할 가능성이 높다. 

 

 

 

 

쉽게 이해하는 SSR, CSR  -> 출처  :  https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC

 

 

 

---

 

< 레퍼런스 >

• https://junghyeonsu.tistory.com/258

[개발지식] Client Side Rendering & Server Side Rendering 차이점에 대해서 아시나요?

• https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1

SPA / Client Side Rendering 그리고 Server Side Rendering

• https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg#client-side-rendering-csr

CSR vs SSR vs SSG - 콥 노트

• https://miracleground.tistory.com/entry/SSR%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-CSR%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

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