CSR, SSR에 대한 장단점 정리 (feat. SPA)
- front
- 2022. 10. 1.
SHORTCUT
ℹ️ SSR (Server Side Rendering)
서버 사이드 랜더링은 서버측에서 데이터를 모두 구성하여 클라이언트에게 전달해주는, 전통적인 랜더링 방식입니다. 서버에서 HTML을 모두 작성하여 브라우저에게 전달, 브라우저는 랜더링을 통해 사용자에게 보여주는 형태이죠.
☀️ 장점
- 검색 엔진 최적화(SEO)에 유리
- 이미 HTML 내에 모든 정보가 포함되어 있으므로, 검색엔진이 사이트를 탐색할 때 해당 정보를 가지고 올 수 있습니다.
🌧 단점
- 서버의 부하 증가 + 웹 로딩 속도 증가
- 웹의 정보가 많아질수록 서버에서 담당하는 처리양도 늘어나게 됩니다.
- 웹에서 모든 정보를 다 처리해서 전달하므로, 서버의 부하가 클 수록 웹 로딩 속도도 증가하게 됩니다.
- 사용자 경험(UX) 감소
- 새로운 페이지로 이동할 때마다 새로고침(깜빡)이 일어나게 됩니다.
- 여기에 웹 로딩 속도까지 오래걸린다면? 🤮
ℹ️ CSR (Client Side Rendering)
클라이언트 사이드 랜더링인, CSR은 말 그대로 클라이언트 측에서 모든 랜더링을 진행한다는 의미입니다.
브라우저에게 비어있는 HTML과 JS를 전달하고. JS가 실행되는 과정을 통해 서버로 부터 관련 데이터를 받아 랜더링을 진행하는 형식입니다.
☀️ 장점
- 최초 랜더링 이후, 필요한 부분만 서버에서 데이터를 받아오기 때문에 빠른 응답이 가능합니다.
- 공통적으로 사용되는 레이아웃이나 CSS, JS를 다시 다운로드 받을 필요가 없기 때문에 서버 부담이 감소합니다.
- 모듈화 및 컴포넌트화가 용이해집니다.
필요한 부분만 랜더링을 진행하는 방식이기 때문에, 컴포넌트에 대해서 독립적인 구성이 가능해집니다.
- 간편 로그인 컴포넌트를 개발한다고 했을때, 로그인 페이지 전체를 개발하는 것이 아닌. 해당 컴포넌트만 개발하여 서버로 따로 요청하는 방식으로 처리할 수 있습니다.
APP LIKE한 경험이 가능해집니다.- 별도의 새로고침 없이 페이지를 랜더링하기 때문에 앱과 같은 경험을 제공해줍니다.
🌟 SPA(Single Page Application)
SPA는 싱글 페이지, 즉 하나의 페이지로 구성된 어플리케이션을 의미합니다.
최초의 첫 페이지를 랜더링 한 이후, 공통 요소들(헤더, 푸터)는 유지한 채 메인 컨텐츠를 교체하는 식으로 구성하는 형태입니다. 실제 앱 처럼 구동이 가능하기 때문에 (아마도?) 20년도 이후로 크게 주목받기 시작했습니다.
해당 페이지를 구성하는 대표적인 기술로는,
Vue.js,React.js가 존재합니다.
🌧 단점
- 보안상의 문제가 발생할 수 있습니다.
- CSR, SPA 구조상 클라이언트 측에서 다양한 로직이 수행되는데, 만약 이 과정에서 비즈니스 로직이 노출된다면 보안상 이슈가 발생할 수 있습니다.
- 프론트엔드 상에선 비즈니스 로직을 최소화하는 것이 필요합니다.
- 검색 엔진 최적화(SEO)가 어렵습니다.
- 검색 엔진 BOT의 크롤링 과정에서 비어있는 HTML을 받아가기 때문에, 사이트의 정보를 실시간으로 반영하기 어렵습니다.
💁🏻♂️ SPA으로 구성된 페이지에서 SSR 필요한 이유?
가장 대표적으론 검색 엔진 최적화(SEO)를 하기 위해서 입니다.
사용자가 사용하기 편한 UI/UX를 지닌 사이트를 만드는 것도 중요하지만, 사용자를 자신의 사이트로 불러올 수 있도록 노출시키는 것도 중요합니다. 구글/네이버 와 같은 포털에서 얼마나 잘 노출되어 새로운 유저를 끌어올 수 있느냐는, 사이트의 성패를 결정하기도 합니다.
따라서 검색 엔진 봇이 우리 사이트의 새로운 정보, 예를 들면 신규 입점 상품이라던가 신규 경제 칼럼과 같은 내용들을, 제대로 긁어가고 포털 사이트에 노출시키도록 해줘야 합니다.
따라서 Next.js 와 같은 라이브러리를 통해 SSR과 CSR의 단점을 커버하여 웹을 구성하는 것이 중요합니다.
Next.js 는 첫 페이지는 백엔드 서버에서 작업하여, 비어있는 HTML이 아닌 데이터가 존재하는 페이지를 반환하고 그 이후부턴 CSR과 같은 방식을 취하도록 하는 라이브러리입니다.
다음 글
next.js 프로젝트 셋업과 최초 실행 코드에 대한 간단한 설명은? ⬇️⬇️
https://23log.tistory.com/185
*본 포스팅은 원티드 프리온보딩 기술 챌린지 과제를 위해 작성된 글입니다.