웹을 공부한다면, SPA/MPA, CSR/SSR는 기본 상식이다. 배포를 공부하다보니, 프론트엔드 배포 방법을 정할 때, CSR/SSR중 어느 방식이냐 정한 후에 배포 방법을 정해야한다는 사실을 알았다. 이후로,
😀 SPA (Single Page Application) : CSR에 적합
: 하나의 페이지로만 구성된 홈페이지
-> 모든 SPA가 CSR을 사용하는 건 아님!
😀 MPA (Multiple Page Application) : SSR에 적합
: 여러 개의 페이지로 이루어진 홈페이지
-> 클라이언트가 서버에 요청 보내면, 서버에서 렌더링하여 응답하여 돌려줌
- 새로고침 발생
😀 CSR (Client Side Rendering): 정적 웹 사이트
: 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드
-> 필요한 부분만 정보 서버에서 받아와서 클라이언트에서 렌더링
❤️ 장점
- 원하는 내용만 업데이트 가능
- 링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정으로 두고 안에 콘텐츠만 업데이트하여 로드
- 서버의 부하를 줄일 수 있다 (서버는 데이터를 주고받는 일만 수행)
❤️ 단점
- 첫 진입 시 로딩 속도가 길다
- seo에 좋지 않다
- SEO: 검색엔진 최적화로, 검색 결과를 최상단에 노출하게 만드는 기법
-> 검색 엔진은 index.html을 기준으로 어떤 데이터가 들어있는지, 이 사이트가 적절한 사이트인지 판단하는데, csr에서는 index.html이 비어있다. 렌더링 통해서 이곳에 정보 가져오는 것이므로 처음엔 비어있다. 따라서 이 빈 페이지를 좋은 사이트로 인식할 확률이 적음
😀 SSR (Server Side Rendering): 동적 웹 사이트
- 파일이 동적으로 생성
: 서버에서 렌더링 진행
-> 서버측에서 데이터 가져와서 페이지 구성 후, 브라우저에 전달함
-> 클라이언트가 페이지 이동 시, 다시 서버에 데이터 받아와서 브라우저에 모든 내용 전달
❤️ 장점
- 서버측에서 모두 처리하여 보내므로, 초기 구동 속도가 비교적 빠름
- seo가 좋다: html 파일이 비어있지 않으므로, 비교적 csr 방식으로 짜여진 홈페이지보다 좋은 사이트로 인식
❤️ 단점
- 서버의 부하
- 똑같은 내용도 재렌더링 (페이지 이동 느림)
😀 그럼 어떤 방식 선택?
: 어떤 방식이 더 좋다 이런 건 없다. 프로젝트 종류에 따라 다를 것이다.
-> 페이지의 변화가 많이 없는 사이트의 경우에는 CSR 방식으로 클리언트 요청 시에만 데이터 받아와서 클라이언트에서 웹 서버로 렌더링하는 것이다.
- SSR
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합- SEO(Search Engine Optimization) 가 우선순위인 경우
- 웹 페이지가 사용자와 상호작용이 적은 경우
- CSR
- SEO 가 우선순위가 아닌 경우- 빠른 라우팅: 사이트에 풍부한 상호 작용이 있는 경우
- 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링)
😀 CSR/SSR 에 따른 배포 방법
😀 그렇다면 리액트는?
: Vue, Angular, React 프레임워크로 만든 홈페이지들이 대부분 여기에 속함
-> 리액트가 csr이기 때문에 처음에 모든 내용들을 로드해오기 때문에, npm start하면 로드 시간이 오래걸리는 것이다.
-> next.js는 ssr 방식 (seo에 좋아서 요즘 뜨고 있다)
⭕ 나의 언어로 정리
: SPA는 단일페이지로 만들어진 홈페이지이다. 따라서 이런 홈페이지는 csr에 적합하다. CSR은 데이터가 필요한 경우에 서버에 요청하고 렌더링은 클라이언트에서 이루어진다. 따라서 매번 새로고침하는 것이 아니고, 필요한 부분만을 렌더링해주는 것이다. 초기에 모든 것을 로딩하므로 초기 구동 속도는 느리지만, 빠른 라우팅/동적 렌더링의 장점이 있다. 그리고 초기에는 HTML이 비어있으므로 SEO에는 좋지 않다. 반면에 여러 페이지로 이루어진 MPA는 페이지가 여러 개이므로 매 번 페이지를 불러오는 SSR방식이 좋다. SSR방식은 클라이언트가 요청할 때마다, 서버가 데이터로 다 처리한 이후에 완성된 HTML 파일을 응답으로 돌려주는 것이다. 초기 구동 속도는 빠를 수 있지만, 페이지를 넘어가는 속도가 느리다. 하지만 HTML 파일이 비어있지 않으므로, SEO에 좋다. 즉, 동적 웹 사이트 생성 시에 좋다. 파일이 동적으로 생성되기 때문이다.
네이버 블로그나 뉴스 기사들은 초기에 빠르게 구동시켜야 하고, 검색엔진에 많이 노출을 시켜야하므로 SSR이 적합하지만, 아고다와 같은 예약사이트들은 클라이언트와 상호작용이 많으므로, 서버에 계속해서 렌더링이 이루어질 경우 부하가 있을 수 있으므로 CSR이 적합하다.
어쨌튼!!!! CSR과 SSR의 차이는 렌더링이 어디에서 이루어지느냐이다. CSR은 데이터만 서버에서 받아와서 클라이언트에서 렌더링이 이루어지고, SSR은 서버 자체에서 렌더링이 이루어지고, 클라이언트는 응답을 받아온다. 또한, 리액트는 SPA를 위한 라이브러리로 CSR 방식이 적합하다.필요한 부분만 렌더링하기 위해, 컴포넌트 단위로 분리한다
