SSR(Server-Side Rendering) vs CSR(Client-Side Rendering)

SSR 과 CSR에 대하여 자세히 짚어보자.
우선 각각의 특징과 장단점을 보자.

 

---

SSR (Server-Side Rendering)

서버 사이드 렌더링 (SSR)은 웹 애플리케이션의 초기 로딩을 서버에서 처리하는 방식. SSR은 사용자가 웹 페이지에 접근했을 때, 서버에서 해당 페이지의 내용을 HTML로 완성하여 브라우저에 전달하는 방식을 의미한다.

동작 원리

1. 사용자가 웹 페이지에 접근하면 서버는 요청을 받아 해당 페이지의 데이터를 가져옴.
   
   
2. 서버는 가져온 데이터를 이용하여 완전한 HTML 문서를 생성하고, 클라이언트에게 응답함.
   
   
3. 브라우저는 받은 HTML 문서를 렌더링하여 초기 화면을 표시함.
   
   
4. 이후 필요한 데이터가 있을 때마다 클라이언트는 서버에 요청하여 데이터를 가져와 뷰를 업데이트함.
   
   

장단점

장점:

• SEO(Search Engine Optimization)에 유리하며, 검색 엔진 최적화가 용이함.
  
  

• 초기 로딩 속도가 빠르며, 첫 화면 표시가 빠름.
  
  

단점:

• 서버 부하가 증가할 수 있음.
  
  

• 뷰 업데이트 시 서버 요청이 필요하므로 렌더링이 느릴 수 있음.
  
  
  

CSR (Client-Side Rendering)

클라이언트 사이드 렌더링 (CSR)은 웹 애플리케이션의 초기 로딩을 클라이언트(브라우저)에서 처리하는 방식. CSR은 브라우저에서 JavaScript를 사용하여 초기 페이지를 렌더링하고, 필요한 데이터를 비동기적으로 요청하여 동적으로 뷰를 업데이트한다.

동작 원리

1. 사용자가 웹 페이지에 접근하면 브라우저는 초기 HTML과 JavaScript를 로드함.
   
   

2. 브라우저는 JavaScript를 사용하여 초기 뷰를 렌더링하고, 필요한 데이터를 서버에 요청함.
   
   

3. 서버는 데이터를 응답하고, 브라우저는 데이터를 이용하여 뷰를 업데이트함.
   
   

장단점

장점:

• 사용자 경험이 향상되며, 인터랙션에 뛰어남.
  
  
• 서버 부하가 감소함.

단점:

• 초기 로딩 속도가 느리며, 첫 화면 표시가 느릴 수 있음.
  
  
• SEO 최적화에 어려움이 있을 수 있음.

 

출처 : https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

The Benefits of Server Side Rendering Over Client Side Rendering

 

결론

SSR과 CSR은 웹 애플리케이션의 초기 로딩 방식에 차이를 가지고 있다. 프로젝트의 요구 사항과 목표에 따라 적절한 방식을 선택하여 개발해야 한다.