해당 포스팅은 우아한 테크코스 테코톡 신세한탄의 CSR&SSR을 보고 정리했습니다.
📍 페이지 구성 방식 - SPA와 MPA
MPA (Multiple Page Application)
- 여러개의 페이지로 구성된 어플리케이션
- 요청이 있을 때 마다 서버로부터 새로운 페이지를 로드하는 방식이다.
- 따라서 렌더링 방식으로 SSR을 사용한다.
SPA (Single Page Application)
- 단일 페이지 어플리케이션
- 기존 MPA와 달리 브라우저에 최초에 한번 페이지를 로드하고, 이 후 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.
- 따라서 렌더링 방식으로 CSR을 사용한다.
📍 렌더링 방식 - CSR과 SSR 개념
CSR (Client Side Rendering)
SSR (Server Side Rendering)
- 요청이 오면 서버에서 HTML을 렌더링 한다.
SSR과 SSG (Static Site Generation)
- SSR과 SSG는 서버에서 HTML을 렌더링하여 보내준다는 측면에서 비슷하지만,차이점은 HTML을 언제 만들어두느냐이다.
- SSG 같은 경우 미리 만들어두고, SSR은 요청이 오면 만들어둔다.
- 따라서 SSR은 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
- SSG는 바뀔 일이 거의 없는 페이지에 적합
📍 CSR과 SSR의 동작 과정과 특징
CSR
- 유저가 웹사이트에 방문한다.
- 브라우저가 서버에 콘텐츠를 요청한다.
- 서버는 빈 뼈대만 있는 HTML을 응답한다.
- 브라우저가 HTML을 파싱하며 연결된 JS링크를 읽고, 서버로부터 JS를 다운로드 받는다.
- 브라우저는 JS를 이용해 동적으로 DOM을 생성하여 페이지를 만들어 브라우저에 띄워준다.
- CSR은 브라우저가 JS 파일을 다운로드 받고, 동적으로 DOM을 생성하는 시간을 기다려야 하므로 초기 로딩 속도가 느리다.
- 서버가 빈 뼈대만 있는 HTML을 넘겨주면 되기 때문에 서버측 부하가 적다.
- 클라이언트 측에서 라우팅, 연산 등을 모두 직접 처리하여 반응 속도가 빠르고 UX도 우수하다.
- 웹 크롤러 봇 입장에서는 처음 HTML이 비어있기 때문에 검색 엔진 최적화에 불리하다. (크롬의 크롤러의 경우는 JS파일을 읽을 수 있긴 하다.)
SSR
- 유저가 웹사이트에 방문한다.
- 브라우저는 서버에 콘텐츠를 요청한다.
- 서버에서는 렌더링 준비를 마친 HTML, JS코드를 응답한다.
- 브라우저는 전달받은 HTML을 렌더링한다.
- 브라우저가 JS 코드를 다운로드한 후, HTML에 JS로직을 연결한다.
- 모든 데이터가 HTML에 담겨진 채로 브라우저에 전달되므로 검색 엔진 최적화에 유리하다.
- 자바스크립트 코드를 실행하고 다운받기 전에 HTML이 렌더링되므로 초기 구동 속도가 빠르다. (하지만 JS로직이 아직 연결되지 않은 상태이므로 사용자의 이벤트에 무반응일 수 있다. 즉 Time to View !== Time to Interect)
📍 CSR 단점 보완 방법
초기 로동 속도 보완
- Code Splitting
- tree-shaking
- chunk 분리
SEO 개선
- pre-rendering
- 라이브러리, 웹팩 플러그인을 통해 각 페이지에 대한 HTML파일을 미리 생성해둔 후, 서버에서 요청하는 주체가 크롤러라면 사전에 렌더링 된 HTML버전 페이지를 보여주는 방법을 적용 할 수 있다.
- 프레임워크 없이 -> 직접 서버 설정하기
- 프레임워크 사용 -> Next.js / Gatsby
Isomorphic App || Universal Rendering
- 초기 렌더링 방식으로 SSR을 사용하고,그 후로는 CSR을 사용하는 방식
호프 너무 도움이 잘됐어요 ~😆!!
역시 갓홒이라는 말이 괜히 있는 게 아니다~~