들어가며
웹 개발을 처음 시작하거나 더 깊이 가기위해서는 SSR(Server-side Rendering), CSR(Client-side Rendering), SPA(Single Page Application) 를 알아야합니다.
이 세가지 개념은 웹 애플리케이션의 렌더링 방식과 사용자 경험에 큰 영향을 미칩니다.
이번 글에서는 SSR, CSR, SPA가 무엇인지 알아보겠습니다. 다음에는 PSSR이라는 최신기술에 대해 알아보겠습니다.
Server-Side Rendering(SSR)이란?
출처: https://www.elancer.co.kr/blog/detail/263
SSR은 서버에서 웹 페이지를 미리 렌더링한 뒤 완성된 HTML 파일을 클라이언트로 전송하는 방식입니다. 사용자가 브라우저에서 특정 URL에 접근하면, 서버는 필요한 데이터를 가져와 HTML을 생성하고 이를 클라이언트에 전달합니다.
SSR의 장점
- SEO(검색 엔진 최적화)
검색 엔진 크롤러가 서버에서 완성된 HTML을 가져가기 때문에, 페이지의 내용을 쉽게 크롤링하고 색인화할 수 있습니다. - 빠른 초기 렌더링
브라우저는 완성된 HTML을 바로 표시하므로 초기 로딩 속도가 빠릅니다.
SSR의 단점
- 페이지 새로고침 문제
페이지 일부만 수정이 필요해도 전체 HTML을 새로 로드해야 하므로 사용자 경험이 떨어집니다. - 서버 부하 증가
요청마다 새로운 HTML을 생성해야 하므로 사용자 수가 많아질수록 서버 부담이 커집니다.
SSR의 한계
SSR은 웹 페이지를 서버에서 렌더링해서 미리 완성된 HTML을 클라이언트(브라우저)로 전달하는 방식을 말합니다.
하지만 SSR방식은 단점이 있습니다.그건 일부분의 데이터만 따로 업데이트가 안된다는 것인데요. SSR방식에서 일부분의 데이터만 변경이 필요해도 계속 페이지를 새로고침해야 되어서 사용자의 편의성이 떨어지게 되었습니다.
그리고 계속 새로고침해야 하면 서버에서도 부하가 증가하게 되었습니다.(요청마다 HTML을 생성) 이러한 문제를 극복하기 위해서 등장한게 React와 Vue입니다.
React와 Vue는 CSR, SPA를 사용합니다 CSR과 SPA 방식은 SSR과 뭐가 다른지 알아보겠습니다.
Client-Side Rendering(CSR)이란?
CSR은 서버에서 HTML을 생성하는 대신, 기본적인 HTML 문서와 JavaScript 파일을 클라이언트로 전달합니다. 클라이언트(브라우저)는 전달받은 JavaScript를 실행해 필요한 데이터를 서버에서 가져오고, 이 데이터를 사용해 페이지를 동적으로 렌더링합니다.
하나의 HTML페이지(div id = "root")에서 사용자의 요청에 따라서 콘텐츠가 동적으로 변하고 전체 페이지를 새로고침 없이 부분적으로 업데이트를 해서 SPA(Single Page Application)이라는 형태를 보이게 됩니다.
root에 App를 렌더링 하는 모습
한마디로 SPA는 하나의 페이지에서 서비스를 제공하는 것이고 SSR은 여러개의 페이지를 옮겨가는 방식입니다.
이런 방식을 사용하면 사용자 입장에서 편하게 사용할 수 있습니다. 하지만 이런 방식은 SEO(검색 엔진 최적화)에 불리합니다.
출처: https://www.elancer.co.kr/blog/detail/263
CSR의 특징
- 페이지 일부 업데이트 가능
JavaScript를 통해 필요한 데이터만 서버에서 가져와 페이지를 업데이트합니다. 전체 새로고침이 필요 없으므로 사용성이 개선됩니다. - SPA와의 연계
CSR은 보통 SPA와 함께 사용되며, 사용자가 페이지 전환 없이 애플리케이션처럼 웹사이트를 사용할 수 있도록 만듭니다.
CSR의 장점
- 사용자 경험 개선
페이지 새로고침 없이 빠르게 동작하므로, 앱처럼 자연스러운 사용자 경험을 제공합니다. - 서버 부하 감소
서버는 데이터를 제공하는 API 역할만 하므로, 서버 리소스 소비가 줄어듭니다.
CSR의 단점
- 초기 로딩 속도 느림
브라우저가 JavaScript를 모두 다운로드하고 실행하기 전까지는 화면에 아무것도 표시되지 않을 수 있습니다. - SEO 어려움
서버가 완성된 HTML을 제공하지 않기 때문에, 검색 엔진 크롤러가 페이지 내용을 제대로 읽지 못할 수 있습니다.
CSR이 SEO가 불리한 이유?
CSR 사이트의 경우 사용자가 방문하는 순간 HTML CSS JS를 브라우저에 전달합니다. 브라우저는 서버에서 전달받은 리소스를 사용해 HTML을 파싱하고 렌더링을 준비합니다.
이과정에서 빈 HTML 화면이 표시되는데, 브라우저에서 HTML을 그리는 동안 크롤러는 페이지를 인식을 하지 못해서 SEO에 불리합니다. 노출이 되지 않아 사용자가 사용을 하지 않게 될 수 있습니다.
CSR방식에서 SSR적용?
CSR방식에서도 SSR방식을 적용할 수 있는 방법이있습니다.
SSR 구현을 위해 다음과 같은 기술과 프레임워크를 활용할 수 있습니다
- React 기반 프레임워크: Next.js
- Vue.js 기반 프레임워크: Nuxt.js
- 일반 서버 언어: Express.js, Django, Ruby on Rails
Next.js나 Nuxt.js를 사용하면 SSR도입이 가능해서 SEO에 유리한 웹을 개발할 수 있습니다.
결론
하나의 웹 페이지에서 한가지의 방식을 사용하지 말고 여러가지를 조합하여 결과를 만들어 낸다면 좋은 웹 사이트를 만들 수 있을 것입니다.
다음에는 SSG나 PSSR이라는 것을 알아보겠습니다.
