CSR(Cilent Side Rendering) & SSR(Sever Side Rendering) 완벽 정리

안녕하세요!! 오늘은 CSR 방식과 SSR 방식에 대해 알아보겠습니다.

📑목차
1. CSR(Cilent Side Rendering)
1-1. CSR이란?
1-2. CSR 동작 과정
1-3. CSR 장단점
2. SSR(Sever Side Rendering)
2-1. SSR이란?
2-2. SSR 동작 과정
2-3. SSR 장단점
2-4. CSR VS SSR 차이점

 

서론

CSR 이라고 들어보셨나요? 아니면 SSR도 들어보셨나요? 프로그래밍 관련해서는 들어보셨을 수도 있습니다. 저도 포스팅을 작성하기 전 CSR이 무엇이고 SSR이 무엇인지는 개념을 이해하고나서 알 수 있게 되었습니다. CSR, SSR 각각 무슨 동작을 하는지 알아볼 필요가 있겠죠? 

 

본론

1. CSR(Client Side Rendering)

 

1-1. CSR이란?

브라우저에서 서버에서 받은 데이터를 렌더링하는 방식

 

 

1-2. CSR 동작 과정

1. 사용자가 웹 사이트에 방문하면 브라우저가 서버에게 요청을 보낸다

2. 서버는 브라우저에서 요청을 받고 html을 빈 뼈대로 브라우저에게 제공

3. 브라우저는 서버에서 응답을 받은 html 문서와 js 링크를 연결하고

4. 브라우저가 렌더링하여 화면을 보여준다.

1-3. CSR 장단점

 

장점

1. 서버 부하 감소

2. SPA에 적합

 

단점

1. 초기 렌더링 속도가 느리다

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

 

2. SSR(Sever Side Rendering)

2-1. SSR 이란?

서버에서 html, js, css 같은 데이터에 대한 렌더링을 마친 후, 브라우저에게 전달하는 방식

 

2-2. SSR 동작 과정

1. 사용자가 웹 사이트에 방문하면 브라우저가 서버에게 요청을 보낸다

2. 서버는 html, js, css에 대한 렌더링을 마친 후 브라우저에게 전송

3. 브라우저는 서버로부터 js를 파일을 받는다

4. 브라우저가 서버로부터 받은 JS 파일을 실행하여 클라이언트 측 렌더링을 시작한다

 

 

2-3. SSR 장단점

 

장점

1. 처음 렌더링 속도가 빠르다

2. 검색엔진 최적화 가능

 

 

 

단점

1. 서버 부하 증가

2. 깜빡임 문제 (계속 새로고침이 일어나기 때문)

 

 

2-4. CSR VS SSR 차이점

가장 큰 차이점은 CSR 에서는 브라우저가 서버에서 받은 데이터를 렌더링하는 방식이고, SSR 방식은 서버에서 데이터들에 대한 렌더링 작업을 마친 후, 브라우저에게 전달하여 렌더링 하는 방식입니다. 

 

 

 

결론

각각  두 방식 모두 다른 방식으로 렌더링 하는 작업을 하고 있습니다. 어느 상황에서 CSR, SSR 방식을 써야하는지가 중요합니다.  복잡하고 동적인 UI가 많을 때는 CSR 방식으로 렌더링하고,  사용자가 웹 사이트를 방문할 때마다 데이터가 업데이트 되는 경우에는 SSR 방식으로 렌더링하여 사용자 경험을 중요시 해야합니다.  각각 장단점들이 다르기 때문에 무조건 "CSR을 써야한다", "SSR을 써야한다." 이런 생각을 하시면 안됩니다. 그럼 포스팅을 마무리하겠습니다.