GOAL
CSR과 SSR 각각의 개념을 이해하고
둘의 차이를 분석한다.
렌더링이란?
서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
SPA (Single Page Application)
[ 정의 ] - 최초 한 번 페이지를 불러온 이후에는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션
[ 과거의 웹 사이트 ] - 전통적인 웹 페이지는 데이터의 변화가 있을 때마다 웹 페이지 전체를 새로 불러왔다.
예를 들어 블로그에 좋아요 하나를 달았을 뿐인데 완전히 새로운 페이지를 불러오는 것이다.
현대에 이르러 점차 웹 사이트가 고도화 되면서 한 페이지에서 다루는 데이터의 용량이 방대해졌고, 약간의 변화에도 완전히 새로운 페이지를 불러오는 것은 점점 버거워졌다.
[ SPA의 등장 ] - 이러한 문제를 해결하기 위해 등장한 것이 바로 SPA(Single Page Application)이다. SPA는 전통적인 웹 페이지와는 다르게 뭔가를 클릭하거나 스크롤 하는 등의 상호작용이 일어난다면, 최소한의 요소만 변경시킨다.
페이지 변경이 일어났다고 보이는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.
CSR(Client Side Rendering)
CSR 과정
클라이언트 사이드 렌더링(CSR)은 Javascript를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미한다.
모든 로직은 서버가 아닌 클라이언트에서 처리된다.
점점 더 복잡해지는 웹 페이지를 구현하기 위해 전통적인 방식 보다는 CSR로 웹을 구현하는 경우가 많아졌다. > React / Vue / Angular
CSR의 장점
- 사용자의 행동에 따라 필요한 부분만 다시 불러오기 때문에 전통적인 방식보다 더 빠른 상호작용이 가능하다.
CSR의 단점
- 응용 프로그램이 커짐에 따라 필요한 Javascript의 양이 증가.
- 초기 페이지 로드가 느림
- SEO(Search Engine Optimization)이 좋지 않음
봇들이 웹 페이지의 index.html 구조를 분석하여 검색 엔진에 영향을 주는데 CSR은 대부분 body가 비어있어 SEO가 잘 동작하지 않는다.
CSR은 다음과 같은 과정을 거친다.
- 클라이언트의 요청에 의해 서버는 html 파일을 클라이언트에 전송한다.
- body의 내부에는 script tag만 들어있다.
- 기본적으로 빈 html 파일이기 때문에 순간적으로 빈 화면이 출력된다.
- 클라이언트는 서버에 app.js를 요청하고 서버는 이를 보내준다.
SSR(Server Side Rendering)
서버 사이드 렌더링(SSR)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 보여주는 방식이다.
SSR의 장점
- 초기 렌더링 시점을 앞당길 수 있음
- SEO 적용이 용이
SSR의 단점
- 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌 완전히 새 페이지를 불러옴. (전통적인 웹 페이지 방식)
Next.js의 등장
Next.js는 CSR 방식인 React를 SSR방식으로 구동하기 쉽게 만들어주는 프레임 워크이다.
-> SSR의 장점과 CSR의 장점을 결합
