SSR, CSR 동작원리와 장단점

2024. 3. 25. 00:12크래프톤 정글 5기/공부

SSR (Server Side Rendering)

: 사용자에게 보여질 페이지를 서버가 모두 구성한 다음 전달하는 방식


 

출처

 

 

1. 사용자가 URL에 접근하면, 클라이언트가 서버에게 요청을 보낸다.

 

2. 서버는 접근 요청을 확인하고, 사용자에게 보여질 데이터가 포함된 HTML 파일과 JavaScript 링크를 클라이언트에 보낸다.

 

3. 사용자는 완성된 웹페이지를 확인할 수 있다. 이 때 JavaScript도 구성된다.

 


장점


 

 

1. [빠른 초기 로드 속도]

: 클라이언트에게 전달이 완료된다면, 시각적으로 웹페이지 전체를 한번에 확인할 수 있다.

 

2. [검색 엔진 최적화 (SEO) 에 유리]

: 사용자의 HTML 파일은 데이터를 포함하며 완성되어 있기 때문에, 크롤링 봇에게 더 우호적이다. 

 

 

 

단점


 

 

1. [상호 작용까지의 시간차 존재]

: JavaScript는 클라이언트가 다운로드 해야하기 때문에, 페이지 동작이 응답이 없을 가능성이 있다.

 

2. [이후 로드에서의 시간적 불리 가능성]

: 어떤 동작을 하더라도 HTML 파일을 서버에서 받아오기 때문에, 사용자가 많은 동작을 요구한다면 총 소요 시간은 느릴 수 있다.

 

3. [서버 부하 발생 가능성]

: 동작을 요청할 때마다 서버는 HTML 파일을 클라이언트에 보내야하기 때문에, 사용자와 동작 요청이 많을수록 서버에 부담이 된다.

 

 


CSR (Client Side Rendering)

: 사용자에게 보여질 페이지의 구성요소를 클라이언트가 처리하는 방식


출처

 

 

1. 사용자가 URL에 접근하면, 클라이언트가 서버에게 요청을 보낸다.

 

2. 서버는 접근 요청을 확인하고, HTML 파일과 JavaScript 링크를 클라이언트에 보낸다. 

 

3. 클라이언트는 이를 확인하고, JavaScript 구성이 완료된다면 웹페이지를 사용자에게 출력한다.

 

3. 사용자는 동작이 가능한 웹페이지를 확인할 수 있다.

 


장점


 

1. [빠른 동작 가능]

: 사용자는 JavaScript 구성 완료 이후 웹페이지를 확인할 수 있으며, 이로 인해 곧바로 동작이 가능하다.

 

2. [서버에 부하가 없다]

: 웹페이지 접근 시 서버가 처리해야할 용량이 적기 때문에, 많은 요청이 들어와도 서버에 부하가 SSR 방식에 비해 적다.

 

3. [이후 로드에서의 시간적 유리]

: 초기 로드까지의 시간은 SSR 방식에 비해 느릴 수 있으나, 이후 동작 요청 시 일부 데이터만 받아와서 표시하면 되므로 빠르다.

 

단점


 

1. [느린 초기 로드 속도]

: 모든 구성이 완료되어야 웹페이지를 확인할 수 있기 때문에, 웹페이지 확인까지의 시간이 SSR 방식에 비해 느릴 수 있다.

 

2. [검색 엔진 최적화 (SEO) 에 불리]

: 처음 서버에서 받아오는 HTML에 모든 데이터가 표기되어있지 않아서, 크롤링 봇에게 우선적이지 않다.

 

 

 

 

'크래프톤 정글 5기 > 공부' 카테고리의 다른 글

Malloc Lab  (0) 2024.04.28
분할정복, Divde / Conquer / Combine  (0) 2024.04.06
B-Tree, Balanced Tree  (1) 2024.04.06
MST, Minimum Spanning Tree  (0) 2024.03.29
DFS, Depth First Search  (0) 2024.03.28