SSR와 CSR의 차이점

먼저 SSR이란 무엇일까?

SSR이란 ServerSideRendering의 줄임말로 Server에서 데이터를 이용하여 페이지를 만들어 클라이언트에게 전달하는 것이다.

 

예를들어 서버가 클라이언트에게 요청이오면 render_template을 이용하여 렌더링할 파일과 사용할 데이터를 넘겨주면 파일과 데이터가 서버의 요구에 맞춰 파일을 완성한 후 클라이언트에게 전달해준다. 

세부적으로 살펴보면

1. 클라이언트가 서버에게 요청을 보낸다.

2. 서버는 'Ready to Render' 즉 바로 렌더링이 가능한 index파일을 만든다.

3. 서버에서 보낸 파일이 클라이언트에게 도착하자마자 즉시 렌더링된다.(javscript 가 적용되지않아-> TTV 시점)

4. 클라이언트가 서버에 javascript파일을 요청하고 다운로드가 완성된다.

5.브라우저가 javascript 프레임워크를 구동하고 interactive한 페이지가 완성된다.(javascript 적용 -> TTI 시점)

 

SSR의 장점

• 페이지의 첫 로딩이 CSR 렌더링 보다 빠르다.
• SEO(Search Engine Optimization) 검색 엔진 최적화에 좋다( 모든 내용이 html에 들어가 있기 때문에 크롤링에 대응할때 장점이 있음)

SSR의 단점

• TTV와 TTI에서의 공백 (클라이언트가 클릭해도 반응하지 않을 수 있음)
• 링크를 이동할때마다 깜빡임 이슈가 있음 -> 이동할때마다 전체 페이지를 다시 받아오기 때문 -> 서버의 비용이 높아지는 문제점 -> 캐시기능을 어떻게 잘 사용하면 잘 되지않을까?

 

CSR이란 무엇일까?

CSR이란 ClientSideRendring의 줄임말로 Server에서 데이터를 받아와 Client에서 렌더링을 하는 것이다

 

예를들어 클라이언트가 서버에 요청을 하면 서버는 페이지를 구성하는데 필요한 데이터들을 전송한다. 클라이언트는 서버에게서 받은 데이터들을 이용하여 렌더링한다.

 

세부적으로 살펴보면

1. 클라이언트가 서버에 요청을 한다.

2. 서버는 클라이언트에게 비어있는 index(.<div id="root"></div>, <script src="app.js"></script>)파일들을 전달한다.

3. 클라이언트는 index파일에 링크되어있는 javscript파일들을 요청한다.

4. 서버는 요청받은 javascript 파일들을 클라이언트에게 전달한다.

5. 페이지를 구성하는 app.js를 받고 추가적인 json파일을 서버에요청하고 전달받아 interactive한 페이지가 완성된다.(TTV와  TTI가 같음)

 

CSR의 장점

• url이 변경되어도 html파일을 다시 받지 않고 Client가 알아서 다시 그리기 떄문에 서버 비용이 적어진다(후속 페이지에 좋음).
• TTV와 TTI가 동시에 보임

CSR의 단점

• 페이지의 첫 로딩이 느리다(javascript파일, app,js, json파일들이 전송완료가 되지 않으면 빈 화면만 보여줌) 프로젝트가 커질수록 문제점이 더 커짐 -> 필요한 파일들을 먼저 분화하여 보내는 방식으로 해결
• HTML파일이 비어있어 SEO 대응에 좋지않다.

CSR과 SSR을 둘다 사용한다면??

첫페이지 로딩을 SSR을 통해 빠르게 구현하고 그 다음부터 CSR을 사용하여 후속페이지에 서버부담이 없고 깜빡거림이 없게 처리할 수 있게된다 이것을 가능하게 하는 것이 React + Next.js 이다.

 

출처:https://www.youtube.com/watch?v=iZ9csAfU5Os