SSR 이란 ?
SSR이란 렌더링의 방식이다.
렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이라고 이전에도 말했다.
알겠나 ?
CSR vs SSR
CSR은 내 클라이언트에서 로직을 수행하는 반면,
SSR은 서버에서 모든 것을 처리한다.
페이지를 이동할 때마다 서버에 데이터를 요청하고, 서버에서는 모든 로직을 처리하고 데이터를 클라이언트에게 주는 것이다.
SSR이란 Server, 즉 서버에서 렌더링 하는 것이다.
우리가 서버에 데이터를 요청할 때 마다, 서버는 완성된 페이지를 보내주고, 클라이언트는 그것을 받아 렌더링 한다.
두 개의 비교를 이쁘게 한 사진을 찾아서 첨부한다.
이전 글과 같은 출처의 SSR 버전의 사진도 첨부했다.
그렇다면 각광받는 SSR의 장점은 대체 무엇일까 ?
SSR의 장점
장점 1. 검색엔진 최적화 (SEO) 가능
-> 서버 사이드 렌더링을 통해 얻을 수 있는 가장 큰 장점이다.
장점 2. 성능 개선 ( 초기 UX 향상 )
-> 첫 렌더링된 html 을 클라이언트에게 전달해 주기때문에 초기로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게된다.
장점 3. 보여주면 안되는 로직 숨기기 가능 ( 보안 )
-> 서버에서 로직을 처리하고 데이터만 보내주기 때문에, 어떠한 과정을 거쳐서 나왔는지 Client가 확인할 수 없다.
SSR의 단점
단점 1. 초기 이후 렌더링 속도
-> CSR과 비교했을 때, 비록 CSR은 초기 로딩 속도는 느리지만, 그 이후 로딩 속도는 매우 빠르다. 반면에 SSR은 초기 로딩과 이후 로딩 속도가 같다. 고로 초기 이후 렌더링 속도는 CSR에 비해 느리다.
단점 2. 서버 과부하
-> 모든 일을 서버가 처리하기 때문에, 서버에 무리가 갈 수 있다.
마치며
이렇게 SSR에 대해서도 알아봤다.
난 아직 CSR보다 SSR이 더 많은 경우로 채택 되는 이유를 와닿을 정도로 느끼진 못한다.
서로 각각의 장단점이 있기에, 무조건 SSR이 CSR보다 우수한 것은 아니다.
상황에 맞게 효율적인 방법을 사용하면 되는 것이다.
대파를 칼로 썰지 가위로 자를지는 당신의 선택이다 !
참고로 난 얇은 파를 좋아해서 칼로 써는 편이다.
참고 :
https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/
'Computer Science > Web' 카테고리의 다른 글
| SEO에 닿아보자 (3) | 2024.10.30 |
|---|---|
| CSR(Client-side Rendering)이란 무엇인가. (1) | 2022.09.19 |
댓글