CSR(Client Side Rendering) vs SSR(Server Sider Rendering)

Next.js 를 보다 잘 이해하기 위해서는 CSR과 SSR의 차이를 알 수 있어야 한다.

 

CSR이란? 클라이언트에서 모든 것을 처리하는 방식 

 

CSR 장점 

- CSR 이 SSR 보다 빠르고 효율적이다.

 

CRS 단점

- 사용자가 첫 화면을 보기까지 로딩이 느리다. y? HTML이 비어 있기 때문에 처음 접속하면 빈 화면이 보이게 되고 다시 링크된 어플리케이션 자바스크립트를 서버로 부터 다운 받기 때문에 여기 자바스크립트에서 어플리케이션에서 필요한 로직 뿐 아니라 프레임워크, 라이브러리 소스 코드들도 다 포함이 되어 있기 때문에 굉장히 사이즈가 커서 다운로드 받는데 시간이 소요된다. + (추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 과정을 거쳐 사용자에게 보여줌)

- 캐싱이 안된다.

- 좋지 않은 SEO(검색엔진 최적화). y? HTML를 분석하는데 있어 title, discription,link 등을 검색엔진에 등록해서 우리가 검색할 때 웹 사이트를 빠르게 검색할 수 있게 도와주는데 CSR에서 사용되어지고 있는 HTML 바디는 대부분 비어져 있기 때문에 검색엔진들이 CSR로 작성된 웹페이지를 분석하는데 많은 어려움을 겪고 있다. 

 

이런 문제점에서 SSR이 도입되게 된다.

 

SSR이란? 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고 소스코드와 함께 클라이언트에게 보내줌 

 

SSR 장점 

- SSR은 서버에서 이미 document(HTML)를 만들어서 오기 때문에 첫 번째 페이지 로딩이 빨라짐

- 모든 컨텐츠가 HTML에 담겨져 있기 떄문에 효율적인 SEO 가능 

SSR 단점 

- Static Sites에서 발생했던 깜박임 이슈 존재 (Blinking issue)

- 서버에 과부하가 걸리기 쉬움

- 사용자가 빠르게 웹사이트를 확인할 수 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 반응이 없는 경우가 발생할 수 있음 

 

CSR, SSR의 장점만 뽑은 Isomorphic App의 예가 Next.js 인데 Next.js를 사용하면 SSR를 리액트로 사용할 수 있다.

 

리액트는 일반적으로 CSR인데 코드는 리액트로 쓰고 Next.js를 사용하면 서버에서 리액트를 사용해도 모든게 랜더링이 된 상태로 HTML코드를 뱉어주는 그런 형태로 코드를 작성할 수 있다. 이렇게 되면 캐싱을  통해서 첫 로딩 속도를 줄이고 , SEO를 해결 할 수 있다.

 

결론

 CSR이 페이지 렌더링도 빠르고 데이터 비용도 아낄 수 있는 여지가 높지만, 만약에 SEO가 정말 중요하고, 캐싱 기술을 활용하고 싶으면 SSR이 더 적합할 수 있다.

만약 CSR과 SSR의 장점을 모두 이용하고 싶으면 Next.js 같은 프레임워크도 존재.

 

여담

아.. 평소에 단순히 웹 페이지가 로딩이 되고 클릭을 했을때 이동하지 않았을때 이유가 SSR 이런거였던가.. 생각도 들고 로딩이 겁나 오래 걸렸던 것은 CRS 었나 싶기도 했다. 당시에는 똥컴이니 서버가 안좋니에서 그쳤는데 새롭게 생각하는 기회가 되었다.

 

참고