카테고리 없음
SSR, CSR, Hybrid rendering
별빛과하엘
2023. 9. 23. 11:00
SSR, CSR
저는 Next.js 옛날에 개발하면서 느끼고 있는 것이 있는데 조금 더 구체적으로 내용을 정리할 필요가 있다고 생각이 들어 블로그를 정리하게 되었습니다. Next.js에서는 어떤 형태로 브라우저가 활성화 되는지 그리고 Hybrid rendering 개념은 무엇인지? SSR과 CSR라는 개념의 정리가 필요해 보였습니다.
SSR는 (Server-Side Rendering) 의미로 사용자가 웹페이지에 접근을 시점부터 발생하게 되는데, 페이지를 불러오기 전에 필요한 경우에는 서버에서 외부 API, 파일 시스템, 데이터가 가공처리, 헤더 설정 등을 데이터 가져오기 됩니다. 그다음으로는 HTML 생성을 하여 브라우저에서 페이지 표시를 하게 됩니다. 원래는 브라우저 실행순서가 더 깊게 있지만 SSR 핵심 요소는 서버에서 미리 모든 데이터 처리하고 웹페이지를 렌더링해준다고 보시면 됩니다.
CSR은 서버에서 HTML 과 Javascript만 받아와 Dom에 뿌려주고, 늦게 API 호출하여 데이터를 넣어주는 방식입니다.
Hybrid rendering 이란?
하이브리드(hybrid)는 특정한 목표를 달성하기 위해 두 개 이상의요소가 합친 것으로, 하이브리드는 다음을 가리키는 말이다. 일반적으로 아날로그와 디지털을 합치면 하이브리드라고 일컫는다.
그냥 핀터레스트(이미지 검색 사이트)에 hybrid라고 검색만 해도... 아래처럼 2개 요소가 합성 되어있는 이미지를 볼 수가 있다.. 으...
이처럼 Hybrid rendering는 위에서 이야기하듯이 두 개 이상의 요소를 합친거처럼, SSR + CSR 를 합쳐서 이야기를 부른다고 생각하시면 됩니다. 실제로 Next.js 프레임워크에서는 SSR과 CSR를 둘다 동시에 사용 할 수 있게 시스템이 구축이 되어있습니다.
그래서 보통 Next.js 개발하면서도 SSR를 사용해야하나... CSR를 사용해야하나 고민을 엄청 많이 한적이 있었던거 같다.
그러면 하나로 합치면 안되는가 고민을 하는 생각이 드는 경우도 있었지만?
그것은 SSR와 CSR 각각의 장단점과 거기에 맞는 기능이 다 다르기 때문입니다.
| SSR | CSR | |
| 장점 | - SEO (검색 엔진 최적화)에 유리 - 네트워크가 느릴 때 유리: 각 페이지마다 나누어 불러옴 - 최초 로딩이 빠름 - 메인 스크립트 로딩이 느릴 때 유리 - 한번의 요청으로 렌더링 가능한 페이지 제공 - 웹사이트의 상호작용이 적을 때 유리 |
- 네트워크가 빠를 때 유리 - 서버의 성능이 좋지 않아도 됨 - 사용자와의 상호 작용이 많은 웹 어플리케이션에 유리 - 메인 스크립트가 가벼울 때 유리 - 데이터 양이 많을 때 유리 |
| 단점 | - 서버 부하가 클 수 있음 - 사용자와의 상호작용이 적어야 함 |
- 최초 로딩이 느릴 수 있음 - SEO에 취약 - 메인 스크립트 로딩이 끝나야 데이터 요청 시작 |
장단점을 이야기 했는거 처럼 서로 필요한 경우들이 많이 있다.
나는 이 기술 블로그 정리하면서 느끼게 된 점은 뭐든지 하나의 기술에 치우치지 말고 여러방법을 생각을 키워야하며, '나는 SSR만 사용할거야!!', '나는 CSR만 사용할거야!!' 가 아니라 다양하게 사용하여 적절한 기능에 맞게 사용해야한다고 생각이 든다.