[JavaScript] 서버사이드 렌더링(SSR) 클라이언트사이드 렌더링(CSR)?

반응형

서버사이드 렌더링(SSR) 클라이언트사이드 렌더링(CSR) ? 
많이 들어봤을 것이다. 
작동방식과 장점 단점을 알아보자 .

 

 

1.클라이언트사이드 렌더링(CSR: Client-Side Rendering)

• 클라이언트사이드 렌더링은  브라우저(클라이언트)에서 페이지를 구성하는 방식이다.
• 처음에 서버에서 브라우저로 빈 HTML 파일을 보내고, 브라우저가 자바스크립트 코드를 다운로드 받아 실행함으로써 페이지의 내용을 채우는 방식이다.
• 요즘 유행하는 자바스크립트 프레임워크인 React, Vue.js, Angular 등에서 많이 사용되며, 특히 Single Page Application(SPA) 방식에서 주로 사용한다.

2024.07.18 - [IT] - [Web Page 와 Single Page Application] 웹 페이지 (Web Page)와 싱글 페이지 어플리케이션 (Single Page Application, SPA) 무엇이 다를까?

[Web Page 와 Single Page Application] 웹 페이지 (Web Page)와 싱글 페이지 어플리케이션 (Single Page Application,

 

작동 방식

1. 초기 요청 (Initial Request): 사용자가 웹사이트에 처음 접속할 때, 브라우저는 서버로 요청을 보낸다.
2. 서버 응답 (Server Response): 서버는 주로 빈 HTML 파일과 자바스크립트 파일을 클라이언트(브라우저)로 보내며, 이때 HTML은 페이지의 기본 구조만 담고 있고, 실제로 보여줄 내용은 자바스크립트에 의해 동적으로 채워지며,이 HTML은 <div id="app"></div>와 같이 비어있는 컨테이너를 포함하고 있을 수 있다. 이 안에 내용이 들어가야 하지만, 처음엔 아무것도 표시되지 않는다.
3. 브라우저 자바스크립트 다운로드 (Downloading JavaScript): 브라우저는 서버에서 받은 자바스크립트 파일을 다운로드하여 실행하며, 자바스크립트 파일에는 페이지를 구성할 데이터와 그 데이터를 어떻게 표시할지에 대한 로직이 포함되어 있다.
4. 렌더링 (Rendering): 자바스크립트가 실행된 후, 자바스크립트 로직에 따라 빈 HTML 안에 실제 페이지가 동적으로 그려지며, 예를 들어, 뉴스 웹사이트라면, 서버로부터 받은 데이터가 자바스크립트로 처리되어 페이지에 뉴스 기사 목록을 채운다.
5. 상호작용 가능 (Interactivity): 렌더링이 완료된 후 사용자는 페이지와 상호작용할 수 있게 되며, 버튼을 클릭하거나 폼을 제출하는 등의 동작이 가능해진다.  페이지의 일부 데이터만 변경하거나 업데이트하는 방식으로 동작하므로, 전체 페이지가 다시 로드되지 않고 더 빠른 UX를 제공한다.

 

☞ 클라이언트사이드 렌더링 (CSR) 장점과 단점이 뭔데 ?

 

장점

• 빠른 사용자 경험 (UX): 한번 자바스크립트를 다운로드하고 나면, 페이지 간 이동이 매우 빠르다. 빠른 이유는 추가적인 서버 요청 없이도 자바스크립트가 화면을 즉시 갱신할 수 있기 떄문이다.
• 복잡한 상호작용 처리: SPA에서는 다양한 애니메이션, 버튼 클릭, 폼 제출 등 사용자와의 상호작용이 많이 발생하는데, CSR은 이런 상호작용에 유리하다.

단점

• 초기 로딩 속도: 처음 페이지를 열 때는 자바스크립트와 관련된 리소스를 모두 다운로드하고 실행해야 하므로, 초기 로딩 속도가 느릴 수 있다. 
• 검색 엔진 최적화(SEO)의 어려움: 검색 엔진은 보통 HTML의 내용을 읽어서 웹 페이지의 정보를 수집하는데, 그러나 CSR에서는 빈 HTML만 처음에 제공되기 때문에, 자바스크립트가 실행되기 전에는 검색 엔진이 내용을 제대로 인식하지 못할 수도 있으며, 이로 인해 SEO가 어려울 수도 있다.
  
  

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

---

2. 서버사이드 렌더링(SSR: Server-Side Rendering)

• 서버사이드 렌더링은 서버에서 자바스크립트를 실행하여 HTML을 미리 만들어서 클라이언트에게 전송하는 방식이다.
• 사용자가 요청을 보낼 때마다 서버에서 HTML을 생성하여 보내주기 때문에, 브라우저는 즉시 완전한 페이지를 받아서 표시할 수 있으며, 요즘에는 Next.js와 같은 프레임워크가 이 방식을 많이 사용한다.

작동 방식

1. 초기 요청 (Initial Request): 사용자가 웹사이트에 처음 접속할 때, 브라우저는 서버에 페이지 데이터를 요청한다.
2. 서버에서 렌더링 (Server Rendering): 서버는 요청을 받으면 자바스크립트를 실행하여 페이지에 필요한 HTML을 생성하며, 서버가 페이지의 모든 요소와 내용을 미리 만들어놓은 HTML 파일을 클라이언트에 전송한다.
3. 서버 응답 (Server Response): 서버가 이미 렌더링한 HTML 파일을 브라우저에 전송하며, 브라우저는 이 HTML 파일을 바로 보여줄 수 있다. 페이지가 화면에 나타나는 속도는 빠르게 되며, 사용자는 완성된 페이지를 거의 바로 볼 수 있다.
4. 자바스크립트 로드 및 상호작용 가능 (Loading JavaScript & Interactivity): HTML이 화면에 렌더링된 후, 자바스크립트 파일이 브라우저에서 다운로드되고 실행되며, 자바스크립트가 실행된 후에 페이지의 상호작용 기능이 가능해진다.. 예를 들어, 클릭 이벤트나 데이터 업데이트 등의 상호작용이 가능하다.

☞서바사이드 렌더링 (CSR) 장점과 단점이 뭔데 ?

장점

• 빠른 초기 로딩 속도: 서버에서 미리 렌더링된 HTML을 브라우저로 전송하기 때문에, 사용자는 즉시 페이지의 내용을 볼 수 있다.
• 검색 엔진 최적화(SEO) 유리: 서버에서 HTML을 미리 생성해주기 때문에, 검색 엔진은 이를 쉽게 읽어들일 수 있으며, CSR과 반대로 SEO에 유리하다.

단점

• 서버 부하 증가: 모든 사용자의 요청에 대해 서버가 HTML을 미리 렌더링하여 보내야 하기 때문에, 서버에 부하가 걸릴 수 있다. 트래픽이 많을 경우 성능 저하가 발생할 수 있다.
• 복잡한 상호작용 처리 어려움: 서버에서 HTML을 렌더링하고 나서 클라이언트로 보내주기 때문에, 클라이언트에서 추가적으로 동적인 상호작용을 처리하는 것이 CSR보다 복잡할 수 있다.

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

 

 

클라이언트사이드 렌더링(CSR)과 서버사이드 렌더링(SSR)을 표로 간단하게 한번 봐보자.

구분	클라이언트사이드 렌더링 (CSR)	서버사이드 렌더링 (SSR)
초기 로딩 속도	느림 - 자바스크립트 다운로드 및 실행 후 렌더링이 이루어져야 함.	빠름 - 서버에서 미리 렌더링된 HTML이 제공되므로, 즉시 화면에 표시됨.
페이지 간 이동	빠름 - 전체 페이지를 새로 불러오지 않고 클라이언트에서 즉시 갱신 가능함.	느림 - 페이지를 변경할 때마다 서버에 새 요청을 보내고, HTML을 다시 받아와야 함.
상호작용 처리	매우 유리 - 복잡한 애니메이션이나 동적 상호작용에 적합함.	상대적으로 덜 유리 - 상호작용 기능은 자바스크립트가 로드된 후에 활성화됨.
검색 엔진 최적화 (SEO)	불리 - 초기 HTML이 빈 상태이므로, 검색 엔진이 페이지 내용을 인식하지 못할 수 있음.	유리 - 서버에서 완성된 HTML이 제공되므로, 검색 엔진이 페이지 내용을 쉽게 인식함.
서버 부하	낮음 - 서버는 주로 자바스크립트 파일과 기본 HTML만 제공하면 됨.	높음 - 각 요청마다 서버가 HTML을 렌더링하여 제공해야 하므로, 트래픽이 많을 경우 부하가 상당함.
사용자 경험 (UX)	동적인 웹 애플리케이션에 유리 - 사용자와의 상호작용이 빠르고 원활함.	콘텐츠 중심 웹사이트에 유리 - 초기 로딩 속도가 빠르고 콘텐츠를 즉시 제공할 수 있음.
적합한 애플리케이션 유형	복잡한 SPA(싱글 페이지 애플리케이션), 상호작용이 많은 웹 애플리케이션에 적합함.	SEO가 중요한 콘텐츠 중심 웹사이트 (블로그, 뉴스 사이트 등)에 적합함