CSR vs SSR에 대하여...

<회고록>

나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다.

 

1. CSR

CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다.

CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다.

이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다.

위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다.

하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다.

2. SSR

 

SSR은 Server Side Rendering의 줄임말이다. 말그대로 서버측에서의 렌더링을 의미한다.

SSR의 동작원리는 다음과 같다. 먼저 Server측에서 렌더링을 끝낸 html 리소스를 주게 된다.

이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 화면에 렌더링 즉 페인팅을 하게 된다.

웨에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 적다는 것을 알 수 잇다.

하지만 다른 페이지를 이동할때는 다시 서버로 부터 html파일을 받아야 하기에 페이지 전환이 부드럽지 않다는 단점이 있다.