CSR과 SSR는 어떤 차이가 있을까?

 대표적인 렌더링 방식인 CSR과 SSR의 각각의 특징에 대해 알아보고 둘의 차이점에 대해 알아보도록 하겠습니다.

 

---

렌더링(Rendering) 이란?

 렌더링(Rendering)이란 서버의 데이터와 화면 각 요소의 템플릿을 조합하여 시각적인 출력물을 생성하는 과정을 의미합니다. 일반적으로 사용자 인터페이스를 만들거나 화면에 노출되는 그래픽이나 텍스트를 출력하는 과정에서 렌더링을 하게 됩니다.

 

 현재 우리가 사용하는 모든 웹 애플리케이션 또한 동일한 렌더링 과정이 발생하는데, 대표적인 렌더링 방식은 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)이 있습니다. 이 두 개의 렌더링 방식에 동작과정 및 차이에 대해 알아보도록 하겠습니다.

 

---

 

SSR(서버 사이드 렌더링) 이란?

 서버 사이드 렌더링(Server Side Rendering)은 웹 애플리케이션의 초기 로딩 시 서버에서 페이지에 대한 정보를 조합하여 렌더링 과정을 수행한 후에 렌더링 된 페이지를 클라이언트로 전달하는 방식을 의미합니다. 즉, 렌더링의 과정을 서버에서 한다는 것을 의미합니다. 

 

---

 

SSR(서버 사이드 렌더링)의 동작 방식

서버 사이드 렌더링의 동작은 다음과 같습니다.

 

• 사용자의 요청 : 클라이언트로부터 웹 페이지에 대한 요청이 서버에 도착하면, 서버는 요청에 대한 응답에 필요한 데이터를 서버로부터 가져옵니다.
• 템플릿과 데이터의 조합 : 서버에서 데이터를 가져오면 미리 정의된 템플릿과 데이터를 조합하여 응답을 보여줄 HTML 페이지를 생성 후 클라이언트에게 전달합니다.
• 초기 로딩 시 페이지 완성 : 클라이언트는 초기 페이지 로딩 시 서버로부터 받은 렌더링이 완료된 HTML을 바로 화면에 출력할 수 있습니다.

 

 그 이후에 발생하는 새로운 요청에 대해서는 이다음에 다룰 방식인 CSR(클라이언트 사이드 렌더링) 방식으로 렌더링 하게 됩니다. 즉, 첫 로딩 시에만 SSR(서버 사이드 렌더링)의 방식을 사용합니다. 이러한 렌더링 방식의 장점은 초기 로딩 시점에 완전히 렌더링이 완료된 상태이기 때문에 검색 엔진에 대한 크롤러가 페이지를 쉽게 인식할 수 있습니다. 또한 적은 로딩 시간으로 인해 높은 사용자 경험을 제공할 수 있습니다.

 

 

https://trip-moonsta.tistory.com/entry/%EC%83%81%EC%9C%84-%EB%85%B8%EC%B6%9C%EC%9D%98-%EC%A7%80%EB%A6%84%EA%B8%B8-SEO%EB%A5%BC-%EC%99%9C-%EA%B0%95%EC%A1%B0%ED%95%98%EB%8A%94%EA%B1%B8%EA%B9%8C

상위 노출의 지름길, SEO를 왜 강조하는걸까?

 

---

 

CSR(클라이언트 사이드 렌더링) 이란?

 클라이언트 사이드 렌더링(Client Side Rendering)이란 웹 애플리케이션의 초기 로딩 시 서버로부터 전달받은 Html, CSS, Javascript와 같은 정적 파일만 제공받아 클라이언트에서 화면을 렌더링 한 후 서버로 부터 필요한 데이터를 전달받는 렌더링 방식을 의미합니다. 이러한 방식은 렌더링을 서버에서 진행하는 서버 사이드 렌더링 방식과 대비됩니다.

 

 

---

 

CSR(클라이언트 사이드 렌더링)의 동작 방식

클라이언트 사이드 렌더링의 동작은 다음과 같습니다.

 

• 초기 로딩 : 클라이언트 사이드 렌더링은 초기 로딩 시에는 서버로부터 HTML, CSS, Javascript와 같은 정적 파일을 제공받습니다.
• 클라이언트에서 화면을 만든 후  Ajax, Fetch를 사용하여 서버로 비동기 방식으로 데이터를 요청합니다.
• 서버로부터 요청한 데이터를 응답받으면, 정적 파일과 데이터를 조합하여 웹 페이지를 동적으로 렌더링 합니다.

 

 

 클라이언트에서 렌더링 하는 이 방식은 프런트 개발에서 유용하게 사용되며, SPA와 같이 더 동적이고, 사용자 친화적인 웹 애플리케이션을 구축하는데 용이하게 사용됩니다. 하지만 초기 로딩 시간이 적게 소요되는 서버 사이드 렌더링 방식과는 다르게 초기 로딩 시간이 더 오래 걸린다는 단점이 있습니다. 따라서 개발하려는 웹 애플리케이션의 목표와 요구사항에 따라 상황에 맞는 적절한 렌더링 방식을 선택하는 것이 중요합니다.